The content property in CSS is used to generate the content dynamically (during run time) ie., it replaces the element with generated content value. It is used to generate content ::before & ::after pseudo-element.
Syntax:
content: normal|none|counter|attr|string|open-quote|close-quote|
no-open-quote|no-close-quote|url|initial|inherit;
Property Values: All the properties are described well with the example below.
normal: It is used to set the content if the content property is normal, also, it is used to sets the default value.
Syntax:
Element::before|after {
content: normal;
}
Example: This example demonstrates the use of the content property to generate content ::before & ::after pseudo-element.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | content Property </title>
<style>
p::before {
content: "Welcome ";
}
a::before {
content: normal;
}
</style>
</head>
<body>
<p>to GeeksforGeeks</p>
<p id="a">you</p>
</body>
</html>
|
Output:
Welcome to GeeksforGeeks
Welcome you
none: It does not set the content before and after the pseudo-element.
Syntax:
Element::before|after {
content: none;
}
Example: This example demonstrates the use of the content property where the content inside the <p> tag, will be displayed dynamically with different values.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | content Property </title>
<style>
p::before {
content: "Hello";
}
p#a::before {
content: none;
}
</style>
</head>
<body>
<p> GeeksforGeeks!</p>
<p id="a">Welcomes to GeeksforGeeks!</p>
</body>
</html>
|
Output:
Hello GeeksforGeeks!
Welcome to GeeksforGeeks!
initial: It sets the property to its default value.
Syntax:
Element::before|after {
content: initial;
}
Example: This example demonstrates the use of the content property where the content is displayed to its initial value.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | content Property </title>
<style>
p::before {
content: "Welcome ";
}
a::before {
content: initial;
}
</style>
</head>
<body>
<p>to GeeksforGeeks</p>
<p id="a">you</p>
</body>
</html>
|
Output:
Hello GeeksforGeeks!
Hello Welcomes to GeeksforGeeks!
attribute: It sets the attribute value containing a specified value.
Syntax:
Element::before|after {
content:attr(href);
}
Example: This example demonstrates the use of the content property where the attribute value is set to the specified values.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | content Property </title>
<style>
a::after {
content: attr(href);
}
</style>
</head>
<body>
<a href=
Click Here!
</a>
</body>
</html>
|
Output:
Click Here! https://www.geeksforgeeks.org/html-style-attribute/
String: It is used to generate any string before and after the HTML element.
Syntax:
Element::before|after {
content: string;
}
Example: This example demonstrates the use of the content property where the string value will generate any string before and after the HTML element.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS | content Property</title>
<style>
/* String value used here */
p::before {
content: "Hello";
}
</style>
</head>
<body>
<p> GeeksforGeeks!</p>
</body>
</html>
|
Output:
Hello GeeksforGeeks!
open-quote: It generates an opening quote before and after an element.
Syntax:
Element::before|after {
content: open-quote;
}
Example: This example demonstrates the use of the content property where the property value of content is set to open-quote.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | content Property </title>
<style>
p::before {
content: open-quote;
}
</style>
</head>
<body>
<p>Welcome to GeeksforGeeks!</p>
</body>
</html>
|
Output:
"Welcome to GeeksforGeeks!
close-quote: It generates a closing quote before and after an element.
Syntax:
Element::before|after {
content: close-quote;
}
Example: This example demonstrates the use of the content property where the property value of content is set to close-quote.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | content Property </title>
<style>
p::after {
content: close-quote;
}
p::before {
content: open-quote;
}
</style>
</head>
<body>
<p>Welcome to GeeksforGeeks!</p>
</body>
</html>
|
Output:
"Welcome to GeeksforGeeks!"
no-open-quote: It removes the opening quote from the content if it is specified.
Syntax:
Element::before|after {
content: no-open-quote;
}
Example: This example demonstrates the use of the content property where the property value of content is set to no-open-quote.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | content Property </title>
<style>
p::before {
content: open-quote;
}
p::before {
content: no-open-quote;
}
</style>
</head>
<body>
<p>Welcome to GeeksforGeeks!</p>
</body>
</html>
|
Output:
Welcome to GeeksforGeeks!
no-close-quote: It removes closing quotes from the content if it is specified.
Syntax:
Element::before|after {
content: no-close-quote;
}
Example: This example demonstrates the use of the content property where the property value of content is set to no-close-quote.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | content Property </title>
<style>
p::before {
content: open-quote;
}
p::after {
content: no-close-quote;
}
</style>
</head>
<body>
<p>Welcome to GeeksforGeeks!</p>
</body>
</html>
|
Output:
"Welcome to GeeksforGeeks!
inherit: This property is inherited from its parent element.
Syntax:
Element::before|after {
content: inherit;
}
Supported Browsers: The browser supported by the content property are listed below:
- Google Chrome 1.0
- Internet Explorer 8.0
- Microsoft Edge 12.0
- Firefox 1.0
- Opera 4.0
- Safari 1.0
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!