最可靠方式是用::after伪元素替换，需设position:relative、padding-right足够、用content插入Unicode或SVG，并通过.collapsed和:not(.collapsed)控制展开/收起态图标方向。
用 ::after 伪元素替换默认图标最可靠
Bootstrap 4 没有内置展开/折叠图标，所谓“默认图标”其实是开发者自己加的（比如 Font Awesome 或 SVG）。如果你看到箭头，大概率是项目里已有额外样式或 JS 插件注入的。想统一控制，别碰 background-image 或 inline SVG，直接用 ::after 最稳。
- 确保按钮有足够左右内边距：
.accordion-button至少设padding-left: 1.5rem和padding-right: 2.5rem，留出图标空间 - 给按钮加相对定位：
.accordion-button { position: relative; }，方便伪元素绝对定位 - 图标用
content+ Unicode 字符（如"▼"）或url()引入小 SVG，避免缩放糊边 - 旋转动画只作用于伪元素本身：
.accordion-button:not(.collapsed)::after { transform: rotate(-180deg); }
.collapsed 类名必须用于状态判断，不是“.open”或“.show”
Bootstrap 4 的 Accordion 使用 .collapsed 表示「当前项处于收起态」——这个类在点击后被加到按钮上，展开时被移除。很多样式失效，是因为误用了 .open（Bootstrap 3 遗留）或 .show（它在内容区，不控制按钮状态）。
- 错误写法：
.accordion-button.show::after→.show不在按钮上，永远不匹配 - 正确写法：
.accordion-button.collapsed::after（收起态图标朝下），.accordion-button:not(.collapsed)::after（展开态图标朝上） - 注意：
:not(.collapsed)是展开态，不是“未初始化态”，所以首次加载若内容默认展开，该类就不存在，样式自然生效
图标颜色和文字颜色要分开控制
直接给 .accordion-button 设 color 会连带影响 ::after 生成的内容（尤其 Unicode 字符），导致图标变灰或不可见。更安全的做法是只对文字节点设色，或单独控制伪元素颜色。
- 如果标题文字包裹在
<span>里，用.accordion-button > span { color: #212529; } - 如果没封装，可用
.accordion-button > *:not(::after) { color: inherit; }（兼容性一般）或干脆不设全局color，只对伪元素显式设color: currentColor或固定值 - 避免用
!important覆盖图标颜色，优先提高选择器权重，比如.accordion-button.collapsed::after { color: #6c757d !important; }容易污染后续维护
边框、圆角、背景色干扰图标位置时，先查 .accordion-item 和 .accordion-button 的盒模型
图标错位、被裁剪、旋转后偏移，八成不是伪元素问题，而是父级 padding/border-radius 或 overflow 隐藏了它。Bootstrap 4 的 .accordion-item 默认有 border-bottom，而 .accordion-button 默认 border: none 但继承了 margin 和 position 行为。
立即学习“前端免费学习笔记（深入）”；
- 检查
.accordion-button是否有overflow: hidden（某些定制主题会加） - 确认
border-radius没设在按钮上——它应该只出现在.accordion-item:first-child .accordion-button和:last-child上 - 如果图标贴右太紧，别调
right，改padding-right和伪元素的right: 1rem组合控制 - 移动端点按区域小？加
@media (max-width: 767.98px) { .accordion-button { padding-right: 3rem; } }
transform: rotate() 偶发重绘异常——这些没法靠一条 CSS 解决，得结合 line-height、vertical-align 和 will-change: transform 综合调。 
