This CSS property generates dynamic content. It can be used with the pseudo-elements ::before and ::after . This CSS property is fully supported in all browsers and used to insert the generated content on a web page.
It replaces the element with the generated value.
Syntax
content: normal | none | counter | string | attr | open-quote | close-quote | no-close-quote | no-open-quote | url | initial | inherit;
Property Values
This CSS attribute contains multiple values that are specified in the table below:
| Values | Description |
|---|---|
| normal | It is used to set the default value |
none |
This value does not set the content. |
| counter | It sets the content as the counter. It is generally a number. It is displayed by using thecounter()orcounters()function. |
| string | It is used to set any string value. It should always be enclosed within quotation marks. It generates any string after or before the HTML element. |
attr |
It inserts the value of the specified attribute after or before the element. If the selector does not have a particular attribute, then an empty string will be inserted. |
| open-quote | It is used to insert the opening quotation mark, or it sets the content to be an opening quote. |
| close-quote | It is used to insert the closing quotation mark, or it sets the content to be a closing quote. |
| no-close-quote | If the closing quotes are specified, then it is used to remove the closing quote from the content. |
| no-open-quote | If the opening quotes are specified, then it is used to remove the opening quote from the content. |
url |
It is used to set the content to some media, which could be an image, video, audio, and many more. |
| Initial | It is used to set the property to its default value. |
| Inherit | It inherits the property from its parent element. |
Let's see some of the illustrations of this CSS property.
Example - Using normal and none value
In this instance, we are employing the ::before pseudo-element to insert the text "Welcome " in front of the paragraph elements. This text won't be appended to the paragraph elements where we have set the values to normal and none.
<!DOCTYPE html>
<html>
<head>
<title>
CSS content Property
</title>
<style>
body{
text-align: center;
}
p{
font-size: 25px;
}
p::before {
content: "Welcome ";
}
#para::before {
content: normal;
}
#para1::before {
content: none;
}
</style>
</head>
<body>
<h1> CSS content property </h1>
<h2> Use of content: normal; and content: none; </h2>
<p> to the C# Tutorial </p>
<p id = "para"> This is a paragraph using <b>normal</b> value. </p>
<p id = "para1"> This is another paragraph using <b>none</b> value. </p>
</body>
</html>
Output
Example - Using string and url value
In this instance, the phrase "Hello World. Welcome " gets appended utilizing the content property and the ::before pseudo-element.
<!DOCTYPE html>
<html>
<head>
<title>
CSS content Property
</title>
<style>
body{
text-align: center;
}
p{
font-size: 25px;
}
p::before {
content: "Hello World. Welcome ";
}
#para::before {
content: url("img.png");
}
#para1::before {
content: url("img.png");
}
</style>
</head>
<body>
<h1> CSS content property </h1>
<h2> Use of content: string; and content: url(); </h2>
<p> to the C# Tutorial </p>
<p id = "para"> This is a paragraph using the <b>url()</b> value. </p>
<p id = "para1"> This is another paragraph using the <b>url()</b> value. </p>
</body>
</html>
Output
Example - Using open-quote and close-quote value
We cannot apply close-quote without open-quote .
<!DOCTYPE html>
<html>
<head>
<title>
CSS content Property
</title>
<style>
body{
text-align: center;
}
p{
font-size: 25px;
}
p::before {
content: open-quote;
}
p::after {
content: close-quote;
}
</style>
</head>
<body>
<h1> CSS content property </h1>
<h2> Use of content: open-quote; and content: close-quote; </h2>
<p> Welcome to the C# Tutorial </p>
<p> This is another paragraph. </p>
</body>
</html>
Output
Example - Utilizing the value of no-open-quote and no-close-quote to remove quotation marks around a specific text.
In this instance, we have implemented the open-quotation and close-quotation for paragraph components, while utilizing the no-open-quotation and no-close-quotation for paragraphs with the .para class.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align: center;
}
p{
font-size: 25px;
}
p::before {
content: open-quote;
}
p::after {
content: close-quote;
}
p.para::before {
content: no-open-quote;
}
p.para::after {
content: no-close-quote;
}
</style>
</head>
<body>
<h1> CSS content property </h1>
<h2> Use of content: no-open-quote; and content: no-close-quote; </h2>
<p> Welcome to the C# Tutorial </p>
<p class="para"> This is another paragraph </p>
</body>
</html>
Output
Example - Using attr
The attr function enables us to incorporate the value of a specific attribute. When the associated element lacks the attribute, it will return an empty string.
In this instance, the link shown on the screen is generated using the attr method.
<!DOCTYPE html>
<html>
<head>
<title>
CSS content Property
</title>
<style>
body{
text-align: center;
}
a::after {
content: attr(href);
}
</style>
</head>
<body>
<h1> CSS Content property </h1>
<h2> The following link is displayed by using the <b>attr()</b> </h2>
<a href= https://www.C# Tutorial>Click here!
</a>
</body>
</html>
Output