whet CSS pseudo element is not rotating

Question

here's simple html with one span item and a triangle CSS pseudo element. I want the triangle rotate on each click, first rotate 90 degrees next click come back to original state.

When class collapsed is toggled also collapsed::before should be applied, isn't it?

The yellow color (just for debugging) but the triangle is not rotating.

What am I missing?

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>

There's a question with 100+ votes on exactly the same subject. How did you not find it ? Does this answer your question? [css rotate a pseudo :after or :before content:""](https://stackoverflow.com/questions/9779919/css-rotate-a-pseudo-after-or-before-content) — Mihai T, Jul 03 '21 at 12:03

score 1 · Accepted Answer · answered Jul 03 '21 at 12:09

1

set display inline-block.

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

answered Jul 03 '21 at 12:09

SSSH

111
1
9

whet CSS pseudo element is not rotating

1 Answers1