 |
VOOZH | about |
|
VOOZH | about |
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
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.
Output:
Welcome to GeeksforGeeks
Welcome you
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.
Output:
Hello GeeksforGeeks!
Welcome to GeeksforGeeks!
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.
Output:
Hello GeeksforGeeks!
Hello Welcomes to GeeksforGeeks!
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.
Output:
Click Here! https://www.geeksforgeeks.org/html/html-style-attribute/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.
Output:
Hello GeeksforGeeks!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.
Output:
"Welcome to GeeksforGeeks!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.
Output:
"Welcome to GeeksforGeeks!"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.
Output:
Welcome to GeeksforGeeks!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.
Output:
"Welcome to GeeksforGeeks!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: