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.
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.
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
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.
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
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.
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
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.
HTML <!DOCTYPE html> <html> <head> <title> CSS content Property </title> <style> a::after { content: attr(href); } </style> </head> <body> <a href= "https://www.geeksforgeeks.org/html/html-style-attribute/"> Click Here! </a> </body> </html> Output:
Click Here! https://www.geeksforgeeks.org/html/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.
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
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.
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
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.
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:
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.
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
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.
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
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: