::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 | |||||
9 | 12 | 1 | 1.5 | 7 | 4 |
Tablets / Mobile | |||||
![]() |
|||||
≤37 | 18 | 4 | 10.1 | 3.2 | 1.0 |
Last updated by CSSPortal on: 25th November 2019
CSS Pseudo Elements
CSS Pseudo Classes
- :active
- :checked
- :default
- :disabled
- :empty
- :enabled
- :first-child
- :first-of-type
- :focus
- :fullscreen
- :hover
- :in-range
- :indeterminate
- :invalid
- :lang
- :last-child
- :last-of-type
- :link
- :not
- :nth-child
- :nth-last-child
- :nth-last-of-type
- :nth-of-type
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :read-only
- :read-write
- :required
- :root
- :target
- :valid
- :visited