whet CSS 伪元素不旋转

Question

这是一个简单的 html，其中包含一个跨度项和一个三角形 CSS 伪元素。我希望三角形在每次点击时旋转，先旋转 90 度，然后点击回到原始状态。

当切换 class collapsed 时，也应该应用 collapsed::before，不是吗？

黄色（调试用）但是三角形不旋转

我错过了什么？

function collapseTree(el){
    el.classList.toggle("collapsed");
}

.span1::before{
       content: "B6";
      color: black;
}

.collapsed::before{
 
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Safari */
  transform: rotate(90deg);  
}

.collapsed{
  background: yellow;  
}

.span1{
  border: indigo 1px solid;
      color: black;
      cursor: pointer;
     }

 <span id="span1" class="span1" onclick="collapseTree(this)">Span</span>

Answer 1

设置显示内联块。

.span1::before{
   content: "B6";
   color: black;
   display: inline-block;
}

whet CSS 伪元素不旋转

whet CSS pseudo element is not rotating

html

javascript

css

pseudo-element