Definition and Usage

The content property specifies the content of pseudo-elements generated by the corresponding CSS pseudo-element selectors (::before, ::after, and ::marker).
The generated content can be styled further using other CSS properties.

The pseudo-element selectors to which the content property can be applied are limited.

It can be applied to these three pseudo-element selectors.

However, the specification does not specify the pseudo-element selectors to which the content property can be applied.

Basic Example

CSS 
h2::before {
    content: "😃 ";
    font-size: 0.8em;
    vertical-align: 0.1em;
}
h2::after {
    content: " 😃";
    font-size: 0.8em;
    vertical-align: 0.1em;
}
p::before {
    content: "« ";
}
p::after {
    content: " »"
}
li::marker {
    content: "♥ ";
    font-size: 0.7em;
}
Add Emojis to Your Web Pages
HTML 
<h2>Examples of Using the content Property</h2>
<p>
    It is a property that specifies the content of pseudo-elements
    generated by the corresponding CSS pseudo-element selectors.
</p>
<ul>
    <li>::before</li>
    <li>::after</li>
    <li>::marker</li>
</ul>
Rendered Output

Formal Syntax

CSS 
selector {
    content: /* value */
}

Formal Definition

Formal definition of the content property
Initial value normal
Applies to All elements, tree-abiding pseudo-elements, and page margin boxes
Inherited no
Animatable no

Values

Accepted values for the content property
normal Initial value.
Uses the default behavior.
However, for the ::before and ::after pseudo-element selectors, it is computed as none.
none Prevents the pseudo-element from being generated, as if display: none were applied.
"text" Sets the content to the specified text in quotes (including emojis).
attr(attribute) Sets the content to the value of the attribute of the corresponding element.
url(URL) Uses the content of the specified URL as the content.
counter(index) Uses the counter() function to use the specified index as the sequence number for the content.
open-quote Sets the content to an opening quotation mark (for example, ").
close-quote Sets the content to a closing quotation mark (for example, ").

Examples of Value Usage

Let's examine examples of the content property values that can be confusing.

attr(attribute)

Sets the content to the value of the attribute of the corresponding element. It can also be used in combination with "text" values.

HTML 
<a href="https://example.com/">Example Domain</a>
CSS 
a::after {
    content: " (" attr(href) ")";
}
Rendered Output

In the code example above, the value of the href attribute, https://example.com/, is used along with the text " (" and ")". The attr(attribute) function can be used together with text. Of course, it can also be used by itself.

url(URL)

Uses the content of the specified URL as the content.

HTML 
<button type="button">Like!</button>
CSS 
button::before {
    content: url(heart.jpg);
    margin-right: 0.5em;
}
Rendered Output

The URL used here can be written as heart.jpg or enclosed in quotes such as "heart.jpg" or 'heart.jpg'.

counter(index)

Uses the counter() function to display the value of the specified index.

This uses the counter() function, which is a CSS function. For usage of the counter() function, refer to MDN - Using CSS counters.

HTML 
<h3>Introduction</h3>
<h3>Main Content</h3>
<h3>Conclusion</h3>
CSS 
body {
    counter-reset: heading; /* Sets the counter name to 'heading'.
                               The initial value is 0. */
}
h3::before {
  counter-increment: heading; /* Increments the 'heading' counter by 1. */
  content: counter(heading); /* Displays the counter value. */
  margin-right: 0.2em;
}
Rendered Output

Accessibility Considerations

The pseudo-elements and content generated by pseudo-element selectors are not HTML elements; they are generated by CSS. Therefore, they are only visible on the screen and are not included in the DOM, which is the actual HTML structure. Because of this characteristic, including important information in pseudo-element content can hinder web accessibility for users who rely on screen readers. If CSS is disabled, especially in browser-supported "reader modes," most of the content generated by pseudo-element selectors is omitted. However, another important consideration is separating content and structure from design. Presenting content through the design layer violates the standard HTML model, so this practice should only be permitted when the generated content does not alter the meaning of the original content.

Content generated by pseudo-elements may not be announced to users in some combinations of screen readers, assistive technologies, and browsers. (See Accessibility support for CSS generated content – Tink.)

Browser Compatibility

Browser compatibility for the content property
Property
Desktop Chrome
Chrome
Desktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
content 1 12 1 1

Specifications

Specification for the content property
Specification
content CSS Generated Content Module Level 3
#content-property

References

See Also