javascript - 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>

标签： javascripthtmlcsspseudo-element

Answer 1

设置显示内联块。

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