Revision Content

{{ CSSRef() }}

Summary

The CSS ::afterpseudo-element matches a virtual last child of the selected element. Typically used to add cosmetic content to an element, by using the {{ cssxref("content") }} CSS property. This element is inline by default.

Syntax

The ::after notation was introduced in CSS 3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation :after introduced in CSS 2.

Examples

Simple usage

Let's create two classes, one for boring paragraphs and one for exciting ones. We can then mark each paragraph by adding a pseudo-element to the end of it.

<p class="boring-text">Here is some good old boring text.</p>
<p>Here is some moderate text that is not either boring or exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.
Just hit the edit button to add new live samples, or improve existing samples.</p>

<p>Here is the live example of the above code.<br />
We have some <span data-descr="collection of words and punctuation">text</span> here with a few
<span data-descr="small popups which also hide again">tooltips</span>.<br />
Dont be shy, hover over to take a <span data-descr="not to be taken literally">look</span>.
</p>

[1] Firefox prior to version 3.5 only implemented the CSS 2.0 version of :after. Not allowed were {{cssxref("position")}}, {{cssxref("float")}}, list-style-* and some display properties. Firefox 3.5 removed those restrictions.