如何为主details标签添加专属切换动画：+转X、∨转向上箭头

修改后的CSS代码 #

.main-summary:before {
  content    : "+";
  font-size  : 2em;
  padding    : 0 0.5em;
  display    : inline-block;
  transition : .5s;
  color      : grey;
  transform  : rotate(0deg);
}
/* 仅给主summary添加右侧箭头，避免影响嵌套的summary */
.main-summary:after {
  padding     : 0px .5em;
  text-align  : right;
  float       : right;
  display     : inline-block;
  content     : "∨";
  font-size   : .7em;
  transition  : .5s;
  width       : 90%;
  font-weight : 700;
}

/* 主details展开时，将+旋转45度变为X */
details[open] .main-summary:before {
  transform: rotate(45deg);
}

/* 主details展开时，将右侧箭头旋转180度变为向上箭头 */
details[open] .main-summary:after {
  transform: rotate(180deg);
}

对应的HTML代码（无需修改） #

<details>
  <summary class="main-summary">
    <p>Main summary</p>
  </summary>
  <details>
    <summary>
      <p>Text in summary</p>
    </summary>
    <p>123</p>
  </details>
</details>

关键说明 #

• 将原来全局的summary:after改为.main-summary:after，确保右侧箭头样式仅作用于主summary，不会影响内部嵌套的summary元素
• 借助details[open]伪类选择器，仅在主
  处于展开状态时修改对应伪元素的transform属性，实现图标翻转的平滑动画
• 保留原有的transition: .5s属性，保证图标切换时的过渡效果自然

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