accordion图标默认由.accordion-button::after伪元素通过css变量--bs-accordion-btn-icon（data uri svg）渲染，位于按钮右侧；直接修改::after常因变量未继承或原生样式权重高而失效。
Accordion图标默认在哪？为什么直接改::after常失效
Bootstrap 5的Accordion图标不是独立元素，而是由.accordion-button::after伪元素通过background-image（SVG data URI）渲染的——它本身没HTML结构，纯靠CSS变量和继承生效。很多人加了自定义content或background-image却没反应，根本原因是：父级没继承到图标变量，或原生样式权重更高，被覆盖失败。
- 图标实际依赖
--bs-accordion-btn-icon这个CSS变量（5.3+），不是靠字体或class切换 - 如果你删了
::after但没重置flex-shrink、margin-left: auto等布局属性，图标位置会错乱甚至挤出按钮 - 移动端点击热区变小：原生
.accordion-button有padding-right: 2.5rem预留空间，换图标后若没同步补足，手指点不中
用CSS变量统一改图标颜色和方向（推荐方案）
Bootstrap 5.3起支持开箱即用的变量控制，比硬写::after更稳定、易维护。只需在:root或组件作用域里重设几个变量，所有Accordion自动响应。
- 改颜色：
--bs-accordion-btn-icon-color: #0d6efd; - 改旋转（比如让“+”变“×”）：
--bs-accordion-btn-icon-transform: rotate(45deg); - 改SVG源（必须是data URI格式）：
--bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg...%3E"); - 注意：变量只对
.accordion-button生效，别误写在.accordion-item上
想把图标移到左边？别动JS，只调CSS布局
默认图标在右侧靠margin-left: auto推过去，移到左边只需反转逻辑，并确保文本内容不被遮挡。
- 清除原有右对齐：
.accordion-button::after { margin-left: 0; } - 加左浮动或
margin-right留空：margin-right: 0.75rem; - 给按钮文字加
padding-left防重叠，例如padding-left: 2rem; - 如果用了自定义SVG，记得调
background-position: left center;和background-size匹配尺寸
自定义SVG图标时最容易漏的三件事
很多人贴进自己的SVG就以为完事，结果图标模糊、偏移、或在深色模式下消失——问题不在SVG本身，而在上下文适配。
- 没声明
background-repeat: no-repeat;→ 图标平铺成条纹 - 没设
background-size: 1.25rem;→ 在高DPI屏上缩成小点或撑破按钮 - SVG里用了
fill="currentColor"但没保证父级color可继承 → 深色主题下图标变黑看不见（应改用fill="%236c757d"硬编码或配合--bs-accordion-btn-icon-color）
padding、background-position、flex行为这三块——少一个，手机上就点不中。
