如何用纯CSS实现伪元素SVG雪佛龙箭头点击旋转切换效果

现有代码的核心问题 #

• 选择器匹配错误：原有写的a[data-toggle="collapse"] .rotate是匹配a标签内部的子元素.rotate类，但项目HTML里根本没给DOM加这个类，承载箭头的是a标签的::after伪元素，不是独立的子DOM节点，自然匹配不到。
• 触发逻辑错配：Bootstrap原生折叠组件的类切换规则是：内容未展开时，触发折叠的a标签会自动加上.collapsed类；内容展开后，这个类会被自动移除，原有代码的旋转状态绑定完全没对齐这个规则。
• 伪元素样式缺失：因为行内元素不支持transform属性，原有代码没有给伪元素设置display: inline-block，CSS的旋转效果根本无法生效。
• 基础语法错误：.smb-card-deck里写的flex: wrap是无效语法，正确属性是flex-wrap: wrap。

修正后的实现方案 #

完全不需要在HTML里新增任何DOM元素、类名，所有逻辑都通过CSS匹配已有状态实现，从根源上避开富文本编辑器篡改标记的问题，只需要替换原有错误的旋转相关CSS即可：

.smb-card-deck {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 10px;
}

/* 基础样式：伪元素承载SVG箭头，加过渡效果 */
a.accordion-toggle::after {
  content: url('data:image/svg+xml,<svg width="1.2em" height="1.2em" fill="%230568ae" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path 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"></path></svg>');
  vertical-align: -0.3em;
  padding-left: 10px;
  /* 动画基础配置 */
  display: inline-block;
  transition: transform 0.2s ease-out;
  /* 初始状态：默认箭头向下，旋转角度0 */
  transform: rotate(0deg);
}

/* 状态匹配：当折叠内容展开，a标签没有.collapsed类时，箭头旋转180度朝上 */
a.accordion-toggle:not(.collapsed)::after {
  transform: rotate(180deg);
}

实际效果与适配说明 #

• 点击触发折叠展开时，箭头会带着0.2秒的平滑过渡从向下指向转到向上指向，再次点击收起内容时，箭头会转回初始的向下指向。
• 所有旋转触发逻辑完全依赖Bootstrap折叠组件原生的类切换动作，不需要写任何JavaScript，也不需要在富文本编辑器生成的HTML里加任何额外标记，彻底规避编辑器篡改标记带来的样式失效问题。
• 原有HTML中.col-sm-12 text-center标签多打了一个闭合引号，修正为class="col-sm-12 text-center"即可正常渲染。

内容的提问来源于stack exchange，提问作者linnse