CSS content property

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 property has numerous values that are defined in the following table:

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 the counter() or counters() 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 example, we are using ::before pseudo-element for inserting the text "Welcome " before the paragraph elements. The text will not be added to those paragraph elements on which we applied the values 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 javaTpoint.com </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>

Test it Now

Output

Example - Using string and url value

In this example the text "Hello World. Welcome " is added by using the content property and ::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 javaTpoint.com </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>

Test it Now

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 javaTpoint.com </p> 
    <p> This is another paragraph. </p> 
</body> 
</html>

Test it Now

Output

Example - Using no-open-quote and no-close-quote value

In this example, we have applied the open-quote and close-quote on paragraph elements, and on paragraph with class .para we applied the no-open-quote and no-close-quote.

<!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 javaTpoint.com </p>
<p class="para"> This is another paragraph </p>

</body>
</html>

Test it Now

Output

Example - Using attr()

The attr() function allows us to insert the value of a particular attribute. If the corresponding element does not have an attribute, then an empty string will be returned.

In this example, the link displayed on the screen is by using the attr() function.

<!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.javatpoint.com>Click here! �
    </a> 
</body> 
</html>

Test it Now

Output