Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Adding HTML entities using CSS content
Adding HTML entities using CSS content allows you to insert special characters or symbols without changing HTML structure directly. In HTML and CSS, entities are special characters that have reserved meanings or representations. They are typically used to display characters that are not readily available on a standard keyboard or to represent special symbols or characters with specific semantic meanings.
CSS provides a way to add HTML entities using the content property. The content property is primarily used with pseudo-elements, such as ::before and ::after selectors, to insert content before or after an element.
Syntax
Following is the syntax for adding HTML entities using CSS content property
selector::before {
content: 'character';
}
selector::after {
content: '\unicode';
}
Here, character can be the actual symbol or HTML entity name, and unicode is the hexadecimal Unicode value of the character.
Methods for Adding HTML Entities
There are two primary methods to add HTML entities using CSS content property
Method 1: Using Direct Characters
You can directly insert special characters as string values in the content property. This method is simple but may have limitations with certain characters that need escaping.
Method 2: Using Unicode Values
Unicode values provide a more reliable way to insert special characters. Use the format \XXXX where XXXX is the hexadecimal Unicode value of the character.
Example Adding Greater Than and Less Than Symbols
Following example demonstrates adding HTML entities for greater than (>) and less than (<) symbols using direct characters
<!DOCTYPE html>
<html>
<head>
<title>Adding HTML entities using CSS content</title>
<style>
p::before {
content: '<';
background-color: #04af2f;
color: white;
font-weight: bold;
padding: 2px 5px;
margin-right: 5px;
}
p::after {
content: '>';
background-color: #04af2f;
color: white;
font-weight: bold;
padding: 2px 5px;
margin-left: 5px;
}
p {
color: #04af2f;
font-family: Arial, sans-serif;
font-size: 18px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Adding HTML entities using CSS content</h3>
<p>Tutorialspoint</p>
</body>
</html>
The output displays the text with less than and greater than symbols before and after
Adding HTML entities using CSS content < Tutorialspoint >
Example Using Unicode Values
Following example shows how to add the same HTML entities using their corresponding Unicode values
<!DOCTYPE html>
<html>
<head>
<title>Adding HTML entities using Unicode</title>
<style>
p::before {
content: '\003C';
background-color: #04af2f;
color: white;
font-weight: bold;
padding: 2px 5px;
margin-right: 5px;
}
p::after {
content: '\003E';
background-color: #04af2f;
color: white;
font-weight: bold;
padding: 2px 5px;
margin-left: 5px;
}
p {
color: #04af2f;
font-family: Arial, sans-serif;
font-size: 18px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Adding HTML entities using Unicode</h3>
<p>Tutorialspoint</p>
</body>
</html>
The output is identical to the previous example, showing that both methods work equally well
Adding HTML entities using Unicode < Tutorialspoint >
Example Adding Various Special Characters
Following example demonstrates adding multiple special characters using both direct characters and Unicode values
<!DOCTYPE html>
<html>
<head>
<title>Various HTML Entities</title>
<style>
.quote::before {
content: '\201C'; /* Left double quotation mark */
color: #ff6b35;
font-size: 20px;
}
.quote::after {
content: '\201D'; /* Right double quotation mark */
color: #ff6b35;
font-size: 20px;
}
.arrow::before {
content: '\2192'; /* Right arrow */
color: #007acc;
margin-right: 10px;
}
.heart::after {
content: '\2665'; /* Black heart */
color: red;
margin-left: 10px;
}
.copyright::after {
content: '\00A9'; /* Copyright symbol */
color: #666;
margin-left: 5px;
}
div {
margin: 15px 0;
font-family: Arial, sans-serif;
font-size: 16px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Various HTML Entities Examples</h3>
<div class="quote">This text has quotation marks</div>
<div class="arrow">This text has an arrow</div>
<div class="heart">This text has a heart</div>
<div class="copyright">TutorialsPoint 2024</div>
</body>
</html>
The output shows various special characters added using Unicode values
Various HTML Entities Examples "This text has quotation marks" ? This text has an arrow This text has a heart ? TutorialsPoint 2024 ©
Common HTML Entities and Their Unicode Values
Following table shows commonly used HTML entities with their corresponding Unicode values
| Entity Name | Symbol | Unicode Value | CSS Content |
|---|---|---|---|
| Less than | < | U+003C | content: '\003C'; |
| Greater than | > | U+003E | content: '\003E'; |
| Copyright | © | U+00A9 | content: '\00A9'; |
| Right arrow | ? | U+2192 | content: '\2192'; |
| Heart | ? | U+2665 | content: '\2665'; |
| Left quote | " | U+201C | content: '\201C'; |
Key Points
The
contentproperty only works with::beforeand::afterpseudo-elements.Unicode values are prefixed with a backslash (
\) and use hexadecimal notation.Unicode method is more reliable for special characters and international symbols.
Direct character method is simpler but may require escaping for certain symbols.
Both methods allow you to add styling (color, background, font-weight) to the inserted entities.
Conclusion
Adding HTML entities using CSS content property provides a flexible way to insert special characters without modifying HTML structure. You can use either direct characters or Unicode values with the ::before and ::after pseudo-elements. Unicode values offer better reliability for complex symbols and international characters.
5K+ Views
