::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 | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
12 | 1 | 1.5 | 7 | 4 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
18 | 4 | 10.1 | 3.2 | 1 | 37 |
Last updated by CSSPortal on: 1st October 2023