CSS content property
The content property in CSS is used primarily with pseudo-elements (::before and ::after) to insert content into a document. This property allows you to generate content dynamically before or after an element’s actual content, which can be useful for adding decorative elements, text, or other content without altering the HTML structure.
Syntax
selector::before {
content: value;
}
selector::after {
content: value;
}
selector: The element to which you want to apply the pseudo-element.value: The content to be inserted, which can be text, an image, or other values.
Values
Text Content:
- Description: You can insert plain text into a pseudo-element.
- Example:
content: "Text";inserts the text "Text" before or after the element.
Images:
- Description: You can insert images using the
url()function. - Example:
content: url('image.png');inserts an image before or after the element.
- Description: You can insert images using the
Counters:
- Description: You can use counters to display dynamically incrementing numbers.
- Example:
content: counter(section);inserts the current value of thesectioncounter.
Empty String:
- Description: An empty string can be used to generate a pseudo-element without any visible content.
- Example:
content: "";creates an empty pseudo-element, which can be useful for styling purposes.
Quotes:
- Description: You can use the
contentproperty to insert quotation marks. - Example:
content: open-quote;inserts an opening quotation mark.
- Description: You can use the
No Value:
- Description: If
contentis not specified, the pseudo-element will not be rendered. - Example:
content: none;hides the pseudo-element.
- Description: If
Usage Example
The content property is commonly used with ::before and ::after pseudo-elements to add decorative or informational content. Here’s an example:
Example
/* Adding a decorative icon before each list item */
ul li::before {
content: url('icon.png'); /* Insert an icon image before each list item */
margin-right: 8px; /* Add space between the icon and the text */
}
/* Adding a quotation mark before and after a blockquote */
blockquote::before {
content: open-quote; /* Insert opening quotation mark */
}
blockquote::after {
content: close-quote; /* Insert closing quotation mark */
}
HTML Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Content Property Example</title>
<style>
/* Include the CSS from the example above here */
</style>
</head>
<body>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<blockquote>
This is a quoted text.
</blockquote>
</body>
</html>
Explanation:
ul li::before:- Uses the
contentproperty withurl('icon.png')to insert an icon image before each list item. Themargin-rightadds space between the icon and the text.
- Uses the
blockquote::beforeandblockquote::after:- Uses the
contentproperty withopen-quoteandclose-quoteto insert quotation marks before and after the blockquote text.
- Uses the
Important Points
Pseudo-Elements:
- The
contentproperty is used specifically with::beforeand::afterpseudo-elements. These pseudo-elements allow you to insert content before or after the actual content of an element.
- The
No Content, No Display:
- If the
contentproperty is not set or is set tonone, the pseudo-element will not be displayed.
- If the
Styling:
- You can apply other CSS properties to
::beforeand::afterpseudo-elements (e.g.,color,font-size,background, etc.) to style the inserted content.
- You can apply other CSS properties to
Counter Integration:
- You can use the
contentproperty in combination withcounter()functions to create automatic numbering or other dynamic content.
- You can use the
Browser Compatibility:
- The
contentproperty and pseudo-elements are well-supported across modern browsers. However, testing across different browsers is recommended to ensure consistent behavior.
- The