::after CSS Pseudo Element

Description

The CSS ::after pseudo element is used to insert content after an element. It is often used to add cosmetic content to an element, such as a colon after a heading or a chevron after a button.

To use the ::after pseudo element, you simply add it to the end of a CSS selector, followed by the content you want to insert. For example, to add a colon after all headings, you would use the following CSS:

h1::after, h2::after, h3::after, h4::after, h5::after, h6::after {
content: ":";
}

You can also use the ::after pseudo element to create more complex effects. For example, you could use it to create a drop-down arrow next to a button, or a tooltip that appears when a user hovers over an element.

Here is an example of how to use the ::after pseudo element to create a drop-down arrow next to a button:
.button::after {
content: "";
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%) rotate(90deg);
width: 10px;
height: 10px;
border-style: solid;
border-width: 2px 2px 0 0;
border-color: currentColor;
}

This CSS will create a small triangle after the button, which will rotate 90 degrees when the user hovers over the button.

The ::after pseudo element is a very versatile tool that can be used to create a wide variety of effects. It is a great way to add extra polish and functionality to your web pages.


Syntax

element::after { content: "text" }

Example

<p class="new-text">New content is being added to CSSPortal.</p>
<p>Here is some normal text to show that nothing will happen here.</p>
<p class="danger-text">We will try not to delete anything important.</p>
.new-text::after {
content: " - COOL!";
color: green;
}
.danger-text::after {
content: " - WARNING!";
color: red;
}

Notes

In CSS3, pseudo-elements were denoted by two colons to make the syntax different from pseudo-classes. In CSS2, they are indicated by a single colon. Browsers generally understand both syntaxes.

Browser Support

The following table will show you the current browser support for the CSS ::after pseudo element.

Desktop
Edge Chrome Firefox Opera Safari
1211.574
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18410.13.2137

Last updated by CSSPortal on: 1st October 2023