1.1 KiB
1.1 KiB
| title |
|---|
| After |
After
The ::after CSS pseudo-element inserts a custom HTML element after the content of the selected HTML element. This selector is most commonly used to add visual content using the CSS content property.
General Syntax:
::after
Example
/* "Text to insert" is placed after the content of each <div> element */
div::after {
content: "Text to insert";
}
More Examples
A great example of a practical use case is if you wanted to display the href attribute value for all links on your page.
<a href="www.freecodecamp.org">Learn to code</a>
a::after {
content: " " attr(href);
}
The ::after CSS pseudo-element can be used in many creative ways, especially when combined with it's sibling ::before.