Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Adding HTML entities using CSS content
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.
CSS ::before and CSS ::after Selectors
The ::before selector is used to add or insert something before the content of each selected element. Following is the syntax −
Syntax
::before {
css declarations;
}
The ::after selector is used to add or insert something after the content of each selected element. Following is the syntax −
::after {
css declarations;
}
We use the CSS content property along with the above selectors to specify the content to insert.
Approach
Following is the approach to Add HTML Entities with the CSS content Property −
First, we need to create an HTML file, then use the <body> tag and add some content in any text tags such “<p>” and <h1>.
Then add CSS using the ::after and ::before pseudo-elements. Then add the content property.
Example
In the following example, we are adding HTML entity “<” (greater than) and “>” (less than) with the CSS content property −
<html>
<head>
<title>Adding HTML entities using CSS content</title>
<style>
h3::before {
content: '<';
background-color: yellow;
color: red;
font-weight: bold;
}
h3::after {
content: '>';
background-color: yellow;
color: red;
font-weight: bold;
}
h3 {
color: green;
}
</style>
</head>
<body>
<h3>Tutorialspoint</h3>
</body>
</html>
As we can see in the output below, the HTML entities “<” and “>” are added before and after the text.
Example
Here, we are adding the same HTML entities as in the previous example with their corresponding Unicode −
<html>
<head>
<title>Adding HTML entities using CSS content</title>
<style>
h3::before {
content: '\003C';
background-color: yellow;
color: red;
font-weight: bold;
}
h3::after {
content: '\003E';
background-color: yellow;
color: red;
font-weight: bold;
}
h3 {
color: green;
}
</style>
</head>
<body>
<h3>Tutorialspoint</h3>
</body>
</html>
If we execute the above program, we can see that the “<” and “>” entities are added with their Unicode.
Example
In the following example, we are adding HTML entities “{” (opened curly brace) and “}” (closed curly brace) with the CSS content property −
<html>
<head>
<title>Adding HTML entities using CSS content</title>
<style>
h3::before {
content: '{';
background-color: yellow;
color: red;
font-weight: bold;
}
h3::after {
content: '}';
background-color: yellow;
color: red;
font-weight: bold;
}
h3 {
color: green;
}
</style>
</head>
<body>
<h3>Tutorialspoint</h3>
</body>
</html>
As we can see in the output the HTML entities “{” and “}” are added before and after the text.
Example
Here, we are adding the above-mentioned HTML entities with their corresponding Unicode −
<html>
<head>
<title>Adding HTML entities using CSS content</title>
<style>
h3::before {
content: '\007B';
background-color: yellow;
color: red;
font-weight: bold;
}
h3::after {
content: '\007D';
background-color: yellow;
color: red;
font-weight: bold;
}
h3 {
color: green;
}
</style>
</head>
<body>
<h3>Tutorialspoint</h3>
</body>
</html>
Example
In the following example, we are adding HTML entity “[” (opened square brace) and “]” (closed square brace) with the CSS content property −
<html>
<head>
<title>Adding HTML entities using CSS content</title>
<style>
h3::before {
content: '[';
background-color: yellow;
color: red;
font-weight: bold;
}
h3::after {
content: ']';
background-color: yellow;
color: red;
font-weight: bold;
}
h3 {
color: green;
}
</style>
</head>
<body>
<h3>Tutorialspoint</h3>
</body>
</html>
Example
Here, we are adding the above-mentioned HTML entities “[” and ”]” with their corresponding Unicode −
<html>
<head>
<title>Adding HTML entities using CSS content</title>
<style>
h3::before {
content: '\005B';
background-color: yellow;
color: red;
font-weight: bold;
}
h3::after {
content: '\005D';
background-color: yellow;
color: red;
font-weight: bold;
}
h3 {
color: green;
}
</style>
</head>
<body>
<h3>Tutorialspoint</h3>
</body>
</html>
On executing the given query, the HTML entities “[]” are added before and after the text.
2K+ Views
To Continue Learning Please Login