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

The ::before and ::after pseudo-elements insert content before or after the element’s content. They are great for those cases when there is a need for decorations, but you don’t want them to be part of the page’s actual markup. With these pseudo-elements, it is possible to insert a text or an embedded object. The CSS content property is used with the ::after and ::before pseudo-elements to insert the content. If you want to rotate the content of these pseudo-elements, 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 “text”.

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

Add CSS

Use the content property. As a value, we use a unicode symbol.
Set the display property to “inline-block”.
Use the transform property set to the “rotate” value. We use the -webkit, -moz, and -o prefixes.

#text:after {
  content: "\2116";
  display: inline-block;
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  -o-transform: rotate(40deg);
  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;
        -webkit-transform: rotate(40deg);
        -moz-transform: rotate(40deg);
        -o-transform: rotate(40deg);
        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

Some text

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;
        -webkit-transform: rotate(40deg);
        -moz-transform: rotate(40deg);
        -o-transform: rotate(40deg);
        transform: rotate(40deg);
      }
    </style>
  </head>
  <body>
    <div id="text">Some text </div>
  </body>
</html>