CSS ::after Selector
Example
Insert some text after the content of each <p> element:
p::after
{
content: " - Remember this";
}
Try it yourself »
More "Try it Yourself" examples below.
Definition and Usage
The ::after selector inserts something after the content of each selected element(s).
Use the content property to specify the content to insert.
Use the ::before selector to insert something before the content.
| Version: | CSS2 |
|---|
Browser Support
The numbers in the table specifies the first browser version that fully supports the selector.
| Selector | |||||
|---|---|---|---|---|---|
| ::after | 4.0 | 9.0 Partial from 8.0 |
3.5 | 3.1 | 7.0 Partial from 4.0 |
Note: IE8 and Opera 4-6 only support the old, single-colon CSS2 syntax (:after). Newer versions support the standard, double-colon CSS3 syntax (::after).
Note: For :after to work in IE8, a <!DOCTYPE> must be declared.
CSS Syntax
::after {
css declarations;
}
More Examples
Example
Insert content after every <p> element, and style the inserted content:
p::after
{
content: " - Remember this";
background-color: yellow;
color: red;
font-weight: bold;
}
Try it yourself »
Related Pages
CSS tutorial: CSS Pseudo-elements
CSS Selector Reference: CSS ::before selector
