Definition and Usage

The ::after pseudo-element selector generates a child pseudo-element directly after the selected element's actual content, acting as its last child, and allows it to be styled.

The syntax of the ::after pseudo-element selector is as follows:

CSS 
::after {
    content: /* value → specifies the content of the generated child pseudo-element: Required */;
    /* specifies properties to style the generated child pseudo-element: Optional */
}

The content property specifies the content of the child pseudo-element generated by the ::after pseudo-element selector. This property is required.
If the content property is not specified or contains an invalid value (for example, none or normal), the ::after pseudo-element selector does not work.

Note:
The initial display value of the child pseudo-element generated by the ::after pseudo-element selector is inline.

Basic Example

The following example demonstrates how the ::after pseudo-element selector works.

CSS 
p::after {
    content: "👉";
    vertical-align: 0.2em;
    margin-left: 0.3em;
}
Add Emojis to Your Web Pages
HTML 
<p>
    This is the content of the paragraph.
</p>
Rendered Output

The actual applied result is that the ::after pseudo-element selector generates a child pseudo-element directly after the selected <p> element's actual content, acting as its last child, and styles it.
This is equivalent to marking up the HTML as if an additional element were inserted, as shown below:

HTML 
<p>
    This is the content of the paragraph.
    <after>👉</after> <!-- There is no <after> tag;
                            this is a virtual markup for explanatory purposes. -->
</p>

Why Use It

The ::after pseudo-element selector is used to easily generate and style a child pseudo-element using CSS alone, without the hassle of manually marking up an additional child element in the HTML document.

Things to Keep in Mind

There are a few points to keep in mind when using the ::after pseudo-element selector.

Accessibility Considerations

The pseudo-element generates by the ::after pseudo-element selector is generated via CSS and is not part of the HTML structure. Therefore, it is only visible on the screen and does not exist in the actual DOM. Because of this, placing essential information within the content of a pseudo-element can hinder web accessibility for users relying on screen readers. When considering accessibility, the core principle is to ensure that necessary information is appropriately provided to all users.

The following is an example of a "Like!" button written without considering accessibility:

CSS 
button::after {
    content: "🧡";
}
HTML here is no text "Like!" to be provided as actual information in the <button> tag. 
<button type="button"></button>
Rendered Output

In this case, because the <button> element does not include the actual text "Like!" in the HTML, users relying on screen readers may receive no information at all. Most screen readers do not interpret CSS-generated content.

Therefore, it is recommended to provide the information in another accessible way, such as adding an aria-label:

HTML 
<button type="button" aria-label="Like!"></button>

The aria-label property is used to provide alternative text for web elements. Its value is a text string that screen readers use to read the element aloud to users.

Specifying the content Property Is Required

The ::after pseudo-element selector requires the content property to be specified.

All the examples so far have styled pseudo-elements generated with the ::after selector by providing content via the content property. However, what if you want to use a ::after pseudo-element purely for styling, without adding any actual content?

For instance, you might want to create simple shapes like a circle or rectangle using a ::after pseudo-element. The following example uses the ::after pseudo-element selector to style a short bar as a decorative element for a heading.

Rendered Output
CSS 
h2::after {
    content: ""; /* <= Note this part */
    display: block;
    width: 2em;
    height: 0.3em;
    background-color: #000;
    margin-top: 0.3em;
}
HTML 
<h2>Pseudo-Element Selector</h2>

In this example, the pseudo-element generated with the ::after selector does not need any content. It is styled purely as a short bar decoration for the heading. However, if you look at the CSS, the content property of the ::after pseudo-element is set to an empty string ("").

Most Common Mistake!
The ::after pseudo-element selector requires the content property to be specified. If it is not specified, the ::after pseudo-element will not be applied.

As shown in the example above, when no actual content is needed for a ::after pseudo-element, simply set the content property to an empty string ("" or '').

Pointer Events Do Not Apply

The child pseudo-element generated by the ::after pseudo-element selector is, by definition, a virtual element. Therefore, pointer events that apply to actual elements do not apply to it.

  • click
  • hover
  • active
  • focus
  • selection
  • drag
  • ...

Because pointer events such as those in the list above do not occur on this pseudo-element, pseudo-class selectors like :hover, :active, and :focus, or pseudo-element selectors like ::selection cannot be used on it.

Cannot Be Used on Elements That Cannot Have Actual Content

There are void elements that have only a start tag and cannot contain text nodes or nested elements (for example, <input>, <hr>, <img>). Among these elements, the <input> element has replacement content generated by the browser, and the <img> element has a resource linked via src as its replacement content.

The ::after pseudo-element selector generates a child pseudo-element directly after the actual content of the selected element. The <input> and <img> elements are not the target of application for the ::after pseudo-element selector. On the other hand, although the <hr> element is a void element, it has a rendered result that is considered actual content in CSS rather than replacement content, so it is the target of application for the ::after pseudo-element selector.

CSS It cannot be used on elements that cannot have actual content (for example, <input>, <img>). 
input::after {
    content: "🧡";
}
img::after {
    content: "🧡";
}
CSS It can be used on <hr>. 
hr::after {
    content: "🧡";
}

Practical Examples

The ::after pseudo-element selector is used to easily generate and style a child pseudo-element using CSS alone, without the hassle of manually marking up an additional child element after the content in the HTML document. Let's look at a few examples of its practical use.

Dividers for Navigation Items Used in Global Footers

HTML 
<nav>
    <ul>
        <li><a href="">View Products</a></li>
        <li><a href="">Privacy Policy</a></li>
        <li><a href="">Customer Service</a></li>
    </ul>
</nav>

Code Explanation
The <nav> tag represents a section of a page that contains links for navigation to other web pages or to sections within the current web page. Common examples include menus, tables of contents, and indexes.

CSS 
ul {
    display: flex;
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
a {
    color: inherit;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
li:not(:last-child)::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 0.8em;
    background-color: rgba(0, 0, 0, .6);
    margin: 0 1.1em;
    vertical-align: -0.06em;
    white-space: nowrap;
}
CSS :last-child Pseudo-Class
Rendered Output

Arrows for 'Forward' Buttons

HTML 
<a href="">Forward</a>
CSS 
a {
    color: inherit;
    text-decoration: none;
    padding: 0.5em 1em;
    background-color: #fff;
    border: 1px solid #777;
    border-radius: 0.5em;
    display: inline-flex;
    align-items: center;
}
a::after {
    content: "";
    display: inline-flex;
    width: 0.5em;
    height: 0.5em;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    transform: rotateZ(225deg);
    margin-left: 0.2em;
}
Rendered Output

Browser Compatibility

Browser Compatibility for the ::after Pseudo-Element
Selector
Desktop Chrome
Chrome
Desktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
::after 1 12 1.5 4
Animation and transition support 26 12 4 7

Specifications

Specification Details for the ::after Pseudo-Element
Specification
::after CSS Pseudo-Elements Module Level 4
#generated-content

References

See Also