Press "Enter" to skip to content

Adding Text Content to an Element Using CSS

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>

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:

Vinish Kapoor

I am a full stack developer and writing about development. I document everything I learn and help thousands of people. foxinfotech.in is created, written, and maintained by me, it is built on WordPress, and hosted by Bluehost. Connect with me on Facebook, Twitter, GitHub and get notifications for new posts.

You may also like:

Comments are closed.