伪元素箭头不能点击触发下拉，因为::before和::after默认pointer-events:none，不参与事件捕获；交互必须绑定在父容器（如.dropdown或button）上，箭头仅作视觉装饰。
伪元素箭头为什么不能点击触发下拉
因为 ::before 和 ::after 生成的内容默认是 pointer-events: none，不参与事件捕获。即使你把箭头画在 或按钮右侧，它本身不会响应 click 或 hover —— 真正的交互区域仍是父容器的可点击区域。
常见错误是给伪元素加 最简方案是给下拉触发按钮加一个向下的小三角，不依赖图标字体或 SVG： 关键点： 立即学习“前端免费学习笔记（深入）”； 想让下拉展开时箭头从 ▼ 变成 ▲，直接改 注意： 伪元素本身没有点击热区，但用户会本能去点箭头位置。解决方法不是扩大伪元素，而是扩大其宿主元素的 真正影响体验的是触发区域尺寸，不是箭头大小。iOS Safari 对 别试图用 cursor: pointer 就以为能点开菜单，结果毫无反应。正确做法是确保触发行为绑定在包裹伪元素的元素上（比如
，浏览器原生下拉控件无法用伪元素覆盖其展开行为 + button 绑定 click
用 ::after 实现向下箭头的最小可行写法
.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; /* 缩小间距，让视觉更紧凑 */
} 的最小可点区域有隐式限制（约 44×44px），若按钮内容过窄，务必通过 padding 补足。pointer-events: auto 强行激活伪元素——它不接收事件，设置了也无效。
