用::before或::after伪元素加unicode箭头字符（如▼），通过:not(.collapsed)控制展开时rotate(-180deg)，配合transition实现平滑旋转动画，避免图片/svg兼容性与维护问题。
折叠按钮没箭头？用 ::before 或 ::after 加图标
Bootstrap 的 accordion-button 默认不带箭头，得自己加。最轻量、最可控的方式是用伪元素 + Unicode 箭头字符（比如 ▼），再配合 transform: rotate() 控制展开/收起状态下的朝向。
别用图片或额外 DOM 元素——既增加维护成本，又容易和 Bootstrap 的 collapsed 类状态脱节。
-
accordion-button展开时自带collapsed类（注意：是“已折叠”状态才加这个类，名字有点反直觉） - 所以默认显示向下箭头，展开后（即
collapsed不存在时）旋转成向上；或者反过来，看设计偏好 - 必须用
!important覆盖 Bootstrap 4/5 默认的text-align: center，否则箭头会居中偏移
transform: rotate() 怎么和 collapsed 类联动
关键不是写死旋转角度，而是靠 CSS 类切换驱动。Bootstrap 在点击时会动态增删 collapsed 类，我们只管写两套样式：
button.accordion-button::after {
content: "▼";
margin-left: 0.5rem;
transition: transform 0.2s ease;
}
button.accordion-button:not(.collapsed)::after {
transform: rotate(-180deg);
}
注意点：
-
not(.collapsed)表示「当前未折叠」——也就是面板展开态，此时箭头应朝上 -
transition必须写在基础选择器里（即带::after的那行），否则旋转无动画 - 如果用 SVG 或字体图标（如 Font Awesome），把
content换成url(...)或对应 Unicode（如\f078），但需确保字体加载完成，否则闪空白
为什么不用 background-image 实现旋转
背景图也能做箭头，但旋转时会连同整个背景一起转，边缘易糊、缩放失真，而且没法单独控制颜色或大小。
- 伪元素可直接继承父级文字色（
color），换主题时自动同步 - 用
em或rem控制font-size，就能等比缩放箭头，响应式友好 - 某些旧版 Safari 对
background-image+transform组合支持不稳定，伪元素兼容性好得多
移动端点击区域变小？记得补 padding 和 touch-action
加了伪元素后，如果按钮本身 padding 不足，手指点到箭头附近可能触发不了折叠——因为事件目标是 ::after，而它默认不参与事件流。
- 给
accordion-button增加左右padding（至少1.5rem），确保热区覆盖箭头区域 - 加
touch-action: manipulation提升 iOS 点击响应速度 - 别对
::after设pointer-events: none——这会让整个伪元素点不动，失去交互意义
collapsed 的逻辑理解反了，或者 transition 没挂对地方。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
