Bootstrap 5的accordion-button默认箭头由::after伪元素通过background-image内联SVG生成，非Unicode或字体图标；覆盖需重置该背景图并注意transform旋转逻辑及!important优先级。
Accordion 默认箭头是怎么生成的
Bootstrap 5 的 accordion-button 默认用伪元素 ::after 渲染向下箭头，本质是通过 background-image: url("data:image/svg...") 内联 SVG 实现的，不是字体图标或 Unicode 字符。这意味着你不能靠改 content 或换字体来覆盖——必须重置这个背景图，或用 !important 强制替换。
覆盖默认箭头的三种可靠方式
推荐按优先级顺序尝试以下方法，避免全局污染和维护风险：
- 在
accordion-button上添加自定义类（如custom-arrow），然后用.accordion-button.custom-arrow::after重写background-image和transform - 如果要用 CSS 变量控制方向（比如旋转箭头），记得同时覆盖
transform：默认展开时是transform: rotate(180deg)，不展开时是transform: rotate(0) - 务必设置
background-size: 1rem 1rem和background-repeat: no-repeat，否则 SVG 可能拉伸或平铺
一个可直接复制的右向箭头示例
把向下箭头改成向右（常用于侧边栏折叠），只需替换为右向 SVG 并调整旋转逻辑：
.accordion-button.custom-arrow::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z' clip-rule='evenodd'/%3E%3C/svg%3E");
transform: rotate(90deg);
}
.accordion-button.custom-arrow:not(.collapsed)::after {
transform: rotate(270deg);
}
注意：SVG 中的 %23212529 是默认文字色 #212529 的 URL 编码，如需适配深色模式，建议用 var(--bs-body-color) 配合 CSS 变量 + url() 动态生成（需构建工具支持）或改用 mask 方案。
为什么直接修改 .accordion-button::after 容易失效
Bootstrap 5 的 CSS 里该选择器带 !important，且权重高（含 .accordion-button:not(.collapsed)::after 这类复合规则）。常见失败原因包括：
- 没加
!important覆盖原生样式（尤其是background-image） - 漏写了
:not(.collapsed)状态下的transform，导致展开后箭头方向错乱 - SVG 路径中用了未转义的
#或空格，导致 data URL 解析失败（浏览器控制台会报GET data:image/svg+xml,... 400）
最稳妥的做法是：用开发者工具定位到原始规则，复制其完整选择器结构，再在其后追加你的样式，并确保 background-image 和 transform 都带 !important ——虽然不优雅，但在 Bootstrap 5 的 CSS 架构下，这是少有的稳定路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
