How to Add HTML Entities with the CSS content Property

There are characters that are either reserved for HTML or not present on a standard keyboard. But HTML provides an entity name or entity number to use such symbols.

Let’s see how we can add HTML entities using the CSS content property.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

  • Use the <body> tag and add some content in <h1>. 
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>W3Docs</h1>
  </body>
</html>

Add CSS

  • Use the :after and :before pseudo-elements. Then, add the content property.
h1:before {
  content: '<';
  color: #1c87c9;
}

h1:after {
  content: '>';
  color: #1c87c9;
}

h1 {
  color: #1c87c9;
}

Let’s see the full code.

Example of adding an HTML entity with the content property:

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      h1:before {
        content: '<';
        color: #1c87c9;
      }
      h1:after {
        content: '>';
        color: #1c87c9;
      }
      h1 {
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h1>W3Docs</h1>
  </body>
</html>

Result

W3Docs

In the next example, we use the same sign as in the previous example, but it is added using its corresponding escaped Unicode. Here also we use the content property.

Example of adding an HTML entity with its corresponding Unicode:

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      h1:before {
        content: '\003C';
        color: #1c87c9;
      }
      h1:after {
        content: '\003E';
        color: #1c87c9;
      }
      h1 {
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h1>W3Docs</h1>
  </body>
</html>