Use the ::before
and ::after
pseudo-elements with CSS Content
property to add text content to an element. The pseudo-element ::before
inserts the text at the beginning position and pseudo-element ::after
inserts the text at the ending position.
Syntax
<element>::before {content: "some text";} <element>::after {content: "some text";}
::before Example
Add a symbol 🔗with "Link" text before every link:
HTML
<div id="btest1"> <ul> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> </div>
Add Text Content Using CSS
#btest1 a::before {content: "🔗Link ";}
Output
::after Example
Add the text "Important" at the end of every H2 heading.
h2::after {content: " Important"; color: red;}
Output
The text "Important" will be added to the H2 headings.
First H2.
Second H2.
This is the H3 heading, so it will not apply.
Third H2.
Reference:
- https://developer.mozilla.org/en-US/docs/Web/CSS/::before
- https://developer.mozilla.org/en-US/docs/Web/CSS/::after