Bootstrap 5折叠面板箭头由.accordion-button::after伪元素控制，默认用base64 SVG实现，需覆盖background-image、transform等属性来替换；正确钩子是:not(.collapsed)，而非.collapsed类。
折叠面板箭头是 .accordion-button::after 伪元素控制的
Bootstrap 5 默认用 SVG 路径画箭头，不是图标字体或图片，所以不能靠改 content 换字符。它通过 background-image 内联一个 base64 编码的 SVG，且默认带旋转动画。直接覆盖这个伪元素就能换掉箭头。
常见错误是只改 content 或试图用 font-family: "bootstrap-icons" —— Bootstrap 5 的 accordion 默认根本没加载图标字体，也不走 ::before/::after 的文字内容路径。
- 必须重写
.accordion-button::after，包括background-image、transform和尺寸 - 记得清除原生 background（否则新旧叠加）：
background-image: none或直接覆盖为新 SVG - 如果要用自定义 SVG，推荐转成 data URL（避免额外请求），并注意 viewBox 和 path 坐标适配 1rem 尺寸
替换为纯 CSS 三角形箭头（无依赖、轻量）
不用 SVG 也能实现，用 border 技巧画小三角，兼容性好，体积小，适合简单场景。关键点在于控制方向和居中。
示例：向下箭头（收起态）→ 向右箭头（展开态）：
立即学习“前端免费学习笔记（深入）”；
.accordion-button::after {
background-image: none;
width: 0.75rem;
height: 0.75rem;
margin-left: auto;
}
.accordion-button:not(.collapsed)::after {
transform: rotate(90deg);
}
.accordion-button::after {
content: "";
border: solid currentColor;
border-width: 0 0.15rem 0.15rem 0;
}
注意：border-width 顺序决定三角朝向；currentColor 自动继承文本色；margin-left: auto 是为了右对齐（Bootstrap 默认有 margin-left: auto，保留它更稳）。
用自定义 SVG 替换并支持深色模式
如果设计要求精确还原品牌箭头或需深色模式自动变色，就得用 inline SVG，并通过 fill="currentColor" 继承文字颜色。这样在 prefers-color-scheme: dark 下，只要文本色变了，箭头也跟着变。
- 把 SVG 转成 data URL，例如：
url("data:image/svg+xml,%3Csvg...%3E")（注意 URL 编码） - 确保 SVG 里
<path fill="currentColor">，不要写死 #000 - 在深色模式下，
.accordion-button文本色通常由--bs-accordion-btn-icon-color控制，你只需确保该 CSS 变量在 dark 主题里已更新 - 别忘了重置
transform：展开时加rotate(180deg)（不是 90），因为默认 SVG 是向下箭头
为什么 .accordion-button.collapsed::after 不生效？
因为 Bootstrap 5 的折叠逻辑不靠添加 .collapsed 类到按钮上——它用的是 :not(.collapsed) 来表示“已展开”，而收起态是默认状态，没有额外类。所以写 .accordion-button.collapsed::after 实际不会命中任何元素。
正确做法只有两个选择：
- 覆盖默认未展开态（即所有按钮初始状态）的
::after - 用
.accordion-button:not(.collapsed)::after控制展开后的样式
这也是最容易踩坑的地方：翻文档或查 DOM 会发现按钮上确实没有 collapsed 类，它只是个“不存在即收起”的布尔逻辑。
复杂点在于，如果你还用了 data-bs-parent 多层嵌套，或者 JS 动态控制 collapse，状态切换完全由 Bootstrap 的 JS 驱动，CSS 层面只能响应 :not(.collapsed) 这个唯一可靠钩子。
