伪元素箭头不能点击触发下拉，因为::before和::after默认pointer-events:none，不参与事件捕获；交互必须绑定在父容器（如.dropdown或button）上，箭头仅作视觉装饰。
伪元素箭头为什么不能点击触发下拉
因为 ::before 和 ::after 生成的内容默认是 pointer-events: none，不参与事件捕获。即使你把箭头画在 <select> 或按钮右侧，它本身不会响应 click 或 hover —— 真正的交互区域仍是父容器的可点击区域。
常见错误是给伪元素加 cursor: pointer 就以为能点开菜单，结果毫无反应。正确做法是确保触发行为绑定在包裹伪元素的元素上（比如 <div class="dropdown">），而不是依赖箭头本身。
- 箭头仅作视觉装饰，不承担交互逻辑
- 若用
<select>，浏览器原生下拉控件无法用伪元素覆盖其展开行为 - 自定义下拉需用
<button>+<ul>结构，再对button绑定click
用 ::after 实现向下箭头的最小可行写法
最简方案是给下拉触发按钮加一个向下的小三角，不依赖图标字体或 SVG：
.dropdown-trigger::after {
content: "";
display: inline-block;
width: 0;
height: 0;
margin-left: 8px;
vertical-align: middle;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid currentColor;
}关键点：
立即学习“前端免费学习笔记（深入）”；
-
content: ""是必须的，否则伪元素不渲染 -
display: inline-block让 border 三角能准确定位 -
currentColor保证箭头颜色随文字色自动变化，避免硬编码#666 - 不要设
position: absolute除非父元素已设position: relative，否则容易脱离行流
hover 展开时箭头旋转的兼容写法
想让下拉展开时箭头从 ▼ 变成 ▲，直接改 border 方向不稳定（部分浏览器重绘异常），推荐用 transform: rotate(180deg)：
.dropdown-trigger::after {
transition: transform 0.2s ease;
}
.dropdown-open .dropdown-trigger::after {
transform: rotate(180deg);
}注意：
- 必须在伪元素上声明
transition，不能只写在父类里 -
rotate(180deg)比切换border-bottom更可靠，尤其在缩放或高 DPI 屏幕下 - 如果父容器用了
will-change: transform，可能引发伪元素闪烁，慎加
移动端点击区域太小导致箭头难触发
伪元素本身没有点击热区，但用户会本能去点箭头位置。解决方法不是扩大伪元素，而是扩大其宿主元素的 padding 或用 min-width 保底：
.dropdown-trigger {
padding: 8px 12px 8px 16px;
min-width: 120px;
}
.dropdown-trigger::after {
margin-left: 6px; /* 缩小间距，让视觉更紧凑 */
}真正影响体验的是触发区域尺寸，不是箭头大小。iOS Safari 对 <button> 的最小可点区域有隐式限制（约 44×44px），若按钮内容过窄，务必通过 padding 补足。
别试图用 pointer-events: auto 强行激活伪元素——它不接收事件，设置了也无效。
