CSS content Property
The content property is used with the ::before and ::after pseudo-elements, to insert generated content. It allows insertion of text, images, or HTML elements, enhancing design without altering the original HTML structure, thereby providing flexibility in styling and layout.
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.
Table of Content
- normal
- none
- initial
- attribute
- String
- open-quote
- close-quote
- no-open-quote:
- no-close-quote
- inherit
normal
The content: normal; CSS property value ensures that no additional content is generated for the ::before and ::after pseudo-elements, maintaining default behavior without inserts.
Syntax:
Element::before|after {
content: normal;
}
Example: This example demonstrates the use of the content property to generate content ::before & ::after pseudo-element.
<!DOCTYPE html>
<html>
<head>
<title> CSS content Property </title>
<style>
p::before {
content: "Welcome ";
}
a::before {
content: normal;
}
</style>
</head>
<body>
<p>to w3wiki</p>
<p id="a">you</p>
</body>
</html>
Output:
Welcome to w3wiki
Welcome you
none
The content: none; CSS property value specifies that no content is generated for the ::before and ::after pseudo-elements, effectively removing any inserted content.
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.
<!DOCTYPE html>
<html>
<head>
<title> CSS content Property </title>
<style>
p::before {
content: "Hello";
}
p#a::before {
content: none;
}
</style>
</head>
<body>
<p> w3wiki!</p>
<p id="a">Welcomes to w3wiki!</p>
</body>
</html>
Output:
Hello w3wiki!
Welcome to w3wiki!
initial
The content: initial; CSS property value sets the content of the ::before and ::after pseudo-elements to its initial default value as specified by the browser.
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.
<!DOCTYPE html>
<html>
<head>
<title> CSS content Property </title>
<style>
p::before {
content: "Welcome ";
}
a::before {
content: initial;
}
</style>
</head>
<body>
<p>to w3wiki</p>
<p id="a">you</p>
</body>
</html>
Output:
Hello w3wiki!
Hello Welcomes to w3wiki!
attribute
The content: attr(attribute-name); CSS property value inserts the value of the specified HTML attribute into the content of the ::before and ::after pseudo-elements.
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.
<!DOCTYPE html>
<html>
<head>
<title> CSS content Property </title>
<style>
a::after {
content: attr(href);
}
</style>
</head>
<body>
<a href=
"https://www.w3wiki.net/html-style-attribute/">
Click Here!
</a>
</body>
</html>
Output:
Click Here! https://www.w3wiki.net/html-style-attribute/
String
The content: “string”; CSS property value inserts the specified string literal into the content of the ::before and ::after pseudo-elements.
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.
<!DOCTYPE html>
<html>
<head>
<title>CSS content Property</title>
<style>
/* String value used here */
p::before {
content: "Hello";
}
</style>
</head>
<body>
<p> w3wiki!</p>
</body>
</html>
Output:
Hello w3wiki!
open-quote
The content: open-quote; CSS property value inserts the appropriate opening quotation mark for the current language into the content of ::before and ::after pseudo-elements.
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.
<!DOCTYPE html>
<html>
<head>
<title> CSS content Property </title>
<style>
p::before {
content: open-quote;
}
</style>
</head>
<body>
<p>Welcome to w3wiki!</p>
</body>
</html>
Output:
"Welcome to w3wiki!
close-quote
The content: close-quote; CSS property value inserts the appropriate closing quotation mark for the current language into the content of ::before and ::after pseudo-elements.
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.
<!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 w3wiki!</p>
</body>
</html>
Output:
"Welcome to w3wiki!"
no-open-quote:
The content: no-open-quote; CSS property value prevents the insertion of an opening quotation mark before content specified using `open-quote` within ::before and ::after pseudo-elements.
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.
<!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 w3wiki!</p>
</body>
</html>
Output:
Welcome to w3wiki!
no-close-quote
The content: no-close-quote; CSS property value prevents the insertion of a closing quotation mark after content specified using close-quote within ::before and ::after pseudo-elements.
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.
<!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 w3wiki!</p>
</body>
</html>
Output:
"Welcome to w3wiki!
inherit
The content: inherit; CSS property value inherits the content behavior from its parent element, allowing ::before and ::after pseudo-elements to follow the parent’s content rules.
Syntax:
Element::before|after {
content: inherit;
}
Supported Browsers: The browser supported by the content property are listed below:
Contact Us