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