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. Note that content: '<' uses a string literal rather than an actual HTML entity or Unicode escape.

Create HTML

Use the <body> tag and add some content in <h1>.

How to Add HTML entities using CSS content

<!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.

How to Add HTML entities using CSS content

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>

Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5"> <span>< W3Docs ></span> </div>

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>

Try it Yourself »

Use Unicode escapes (e.g., \003C) when you need to ensure consistent rendering across different character encodings or when the literal character might conflict with CSS syntax.