::after
In CSS, ::after
creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content
property. It is inline by default.
Try it
Note: The pseudo-elements generated by ::before
and ::after
are inline boxes generated as if they were immediate children of the element on which they are applied, or the "originating element," and thus can not apply to replaced elements, such as <img>
, whose contents are replaced and not affected by the current document's styles.
Syntax
::after {
content: /* value */;
/* properties */
}
If the content
property is not specified, has an invalid value, or has normal
or none
as a value, then the ::after
pseudo-element is not rendered. It behaves as if display: none
is set.
Note: CSS introduced the ::after
notation (with two colons) to distinguish pseudo-classes from pseudo-elements. For backward compatibility, browsers also accept :after
, introduced earlier.
Accessibility
Using an ::after
pseudo-element to add content is discouraged, as it is not reliably accessible to screen readers.
Examples
Simple usage
Let's create two classes: one for boring paragraphs and one for exciting ones. We can use these classes to add pseudo-elements to the end of paragraphs.
HTML
<p class="boring-text">Here is some plain old boring text.</p>
<p>Here is some normal text that is neither boring nor exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.</p>
CSS
.exciting-text::after {
content: " <- EXCITING!";
color: green;
}
.boring-text::after {
content: " <- BORING";
color: red;
}
Result
Decorative example
We can style text or images in the content
property almost any way we want.
HTML
<span class="ribbon">Look at the orange box after this text. </span>
CSS
.ribbon {
background-color: #5bc8f7;
}
.ribbon::after {
content: "This is a fancy orange box.";
background-color: #ffba10;
border-color: black;
border-style: dotted;
}
Result
Tooltips
This example uses ::after
, in conjunction with the attr()
CSS expression and a data-descr
custom data attribute, to create tooltips. No JavaScript is required!
We can also support keyboard users with this technique, by adding a tabindex
of 0
to make each span
keyboard focusable, and using a CSS :focus
selector. This shows how flexible ::before
and ::after
can be, though for the most accessible experience a semantic disclosure widget created in some other way (such as with details and summary elements) is likely to be more appropriate.
HTML
<p>
Here we have some
<span tabindex="0" data-descr="collection of words and punctuation">
text
</span>
with a few
<span tabindex="0" data-descr="small popups that appear when hovering">
tooltips</span
>.
</p>
CSS
span[data-descr] {
position: relative;
text-decoration: underline;
color: #00f;
cursor: help;
}
span[data-descr]:hover::after,
span[data-descr]:focus::after {
content: attr(data-descr);
position: absolute;
left: 0;
top: 24px;
min-width: 200px;
border: 1px #aaaaaa solid;
border-radius: 10px;
background-color: #ffffcc;
padding: 12px;
color: #000000;
font-size: 14px;
z-index: 1;
}
Result
Specifications
Specification |
---|
CSS Pseudo-Elements Module Level 4 # generated-content |
Browser compatibility
BCD tables only load in the browser