How To Add HTML Entities in the CSS Content Property

Introduction

Wondering how to insert special characters and symbols inside generated CSS content? This article will show you how.

Prerequisites

• A general knowledge of HTML5. For a comprehensive review of the HTML5 markup language, explore our series, How To Build a Website in HTML.

Inserting Special Characters into CSS

Insert special characters and symbols inside generated CSS content using their hex notation instead of the usual HTML entity notation. For example, © becomes \\00a9:

Here’s another example:

.foo::before {
  content: "An ellipsis\2026";
}

Cheatsheet and Conversion Tool

• Here’s a great cheatsheet to find the CSS notation for different symbols.
• And here’s a tool to convert HTML entities to their CSS notation.

Conclusion

This is how you insert special characters and symbols into CSS.

For a more comprehensive review of the HTML5 markup language, explore our series, How To Build a Website in HTML.