How to rotate a pseudo-element's content value

Question

Since pseudo-elements are inline, and you can't transform inline elements, how can I make rotation work on a pseudo-element's content value?

content:"\24B6"? 

I'm trying to rotate a Unicode symbol.

Answer 1

Inline elements can't be transformed, and pseudo elements are inline by default, so you must apply display: block or display: inline-block to transform them:

#whatever:after {
  content: "\24B6";
  display: inline-block;
  transform: rotate(30deg);
}

<div id="whatever">Some text </div>