CSS伪元素实现下拉菜单箭头效果

结构，再对 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 对

别试图用 pointer-events: auto 强行激活伪元素——它不接收事件，设置了也无效。

好了，本文到此结束，带大家了解了《CSS伪元素实现下拉菜单箭头效果》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！