How to Rotate the Content of the ::after or ::before Pseudo-Element

The ::before and ::after pseudo-elements insert content before or after an element’s content. They are great for adding decorations without cluttering the page’s actual markup. The CSS content property is mandatory for these pseudo-elements to render, and it is used to insert text or symbols. If you want to rotate the inserted content, this snippet is for you!

We’re going to show how to rotate the content of the ::after pseudo-element. Let’s start with creating HTML.

Create HTML

Use a <div> with an id of “text”.

How to Rotate the Content of the ::after or ::before Pseudo-Element

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

Add CSS

Use the content property with a Unicode value. Here, \2116 represents the numero sign (№).
Set the display property to inline-block (required because pseudo-elements are inline by default and cannot be transformed otherwise).
Use the transform property with the rotate() function. Modern browsers support the standard property without vendor prefixes.

How to Rotate the Content of the ::after or ::before Pseudo-Element

#text:after {
  content: "\2116";
  display: inline-block;
  transform: rotate(40deg);
  font-size: 18px;
  padding-left: 5px;
  color: lightblue;
}

Here is the full example.

Example of rotating the content of the :after pseudo-element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #text:after {
        content: "\2116";
        display: inline-block;
        transform: rotate(40deg);
        font-size: 18px;
        padding-left: 5px;
        color: lightblue;
      }
    </style>
  </head>
  <body>
    <div id="text">Some text</div>
  </body>
</html>

Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5 not-prose">``<div id="text">Some text </div> </div>In our example above, we used the ::after pseudo-element, but also note that the ::before pseudo-element can be used in the same way.

Example of rotating the content of the ::before pseudo-element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #text:before {
        content: "\2116";
        display: inline-block;
        transform: rotate(40deg);
      }
    </style>
  </head>
  <body>
    <div id="text">Some text</div>
  </body>
</html>

Try it Yourself »

Since inline elements cannot be transformed, and pseudo-elements are inline by default, we need the display property set to “inline-block” or “block”.