CSS ::after Pseudo-element
Example
Insert a string 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 pseudo-element inserts some
content after the content of the specified element.
Use the content property to specify the content to insert. The content value can be:
- A string: content: "Hello world!";
- An image: content: url(myimage.jpg);
- Nothing: content: none;
- A counter: content: counter(li);
- A quote: content: close-quote;
- An attribute value: content: " (" attr(href) ")";
Tip: Notice that the inserted content is still inside the specified element. The inserted content is added after the other content inside.
Use ::before to insert some content before the content of the specific element.
| Version: | CSS2 |
|---|
Browser Support
The numbers in the table specifies the first browser version that fully supports the pseudo-element.
| Pseudo-element | |||||
|---|---|---|---|---|---|
| ::after | 4.0 | 9.0 | 3.5 | 3.1 | 7.0 |
CSS Syntax
::after {
css declarations;
}
More Examples
Example
Insert a string after the content of each <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 Pseudo-element Reference: ::before
