whit CSS伪元素不旋转[重复]

Question

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

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

黄色（仅用于调试）但三角形不旋转。

我错过了什么？

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

.span1::before{
       content: "\25B6";
      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: "\25B6";
   color: black;
   display: inline-block;
}