::after CSS Pseudo Element

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

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