How to Rotate a Unicode Symbol in a Pseudo-Element?

Rotate Pseudo-Element Content Values

Question:

How can you rotate a pseudo-element's content value given that they are inline and can't be directly transformed?

Specifically, we want to rotate a Unicode symbol.

<code class="css">::after {
  content: "B6";
}</code>

Answer:

Inline elements cannot be transformed, and pseudo elements are inline by default. To make them transformable, you must set their display property to either block or inline-block.

<code class="css">#whatever:after {
  content: "B6";
  display: inline-block;
  transform: rotate(30deg);
}</code>

<code class="html"><div id="whatever">Some text</div></code>

The above is the detailed content of How to Rotate a Unicode Symbol in a Pseudo-Element?. For more information, please follow other related articles on the PHP Chinese website!