Appearance
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
How to Add HTML entities using CSS content
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>W3Docs</h1>
</body>
</html>Add CSS
How to Add HTML entities using CSS content
css
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:
Example of adding an HTML entity with the content property:
html
<!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:
Example of adding an HTML entity with its corresponding Unicode:
html
<!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>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.