Home » CSS » Adding Text Content to an Element Using CSS

Adding Text Content to an Element Using CSS

By

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:

Related Tutorials: