::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

HTML

<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>

CSS

.new-text::after {

  content: " - COOL!"; 

  color: green;

}

.danger-text::after {

  content: " - WARNING!";

  color: red;

}

Result

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.