先通过CSS的:hover与::before实现悬停箭头效果，再设置按钮基础样式，利用三角形边框绘制隐藏箭头，最后在悬停时通过opacity和visibility控制其淡入显示。
想让按钮在鼠标悬停时显示一个箭头，可以通过CSS的 :hover 伪类与 ::before 伪元素结合实现。这个方法不修改HTML结构，纯CSS就能完成动态装饰效果。
基本原理
:hover 用于定义鼠标悬停时的样式，::before 可在元素内容前插入装饰性内容。将两者结合，可以让箭头只在悬停时出现，提升交互体验。
HTML结构
只需要一个普通的按钮元素：
CSS样式设置
先为按钮设置基础样式，再用 ::before 插入箭头，并通过 :hover 控制其显示：
立即学习“前端免费学习笔记（深入）”；
.arrow-button {
padding: 12px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
position: relative;
transition: all 0.3s ease;
}
.arrow-button::before {
content: "";
position: absolute;
left: -20px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 8px solid white;
opacity: 0;
visibility: hidden;
}
.arrow-button:hover::before {
opacity: 1;
visibility: visible;
}
关键细节说明
使用三角形边框技巧绘制箭头，通过调整 border 属性控制方向和大小。初始状态设置 opacity: 0 和 visibility: hidden 隐藏箭头，悬停时恢复显示，配合 transition 实现淡入效果。
left: -20px 让箭头出现在按钮左侧外侧，可根据布局调整位置。
基本上就这些，不需要JavaScript，简单高效地增强按钮交互感。
