::after CSS Pseudo Element

Description

The ::after pseudo-element is used to display the desired text after the contents of the element to which it is added. The ::after pseudo-element works in conjunction with the content property.

For ::after the following features are characteristic.
1. When adding ::after to a block element, the value of the display property can only be: block, inline, none, marker. All other values ​​will be treated as block.
2. When adding ::after to an inline element, display is limited to inline and none . All others will be perceived as inline.

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

Desktop
Explorer Edge Chrome Firefox Opera Safari
??????
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
??????