Add text using CSS ::before and ::after pseudo-elements.

Adding Text Content to an Element Using CSS

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • CSS
  • 3 mins read

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";}

Let's break down this syntax step by step:

  • <element>: This represents the HTML element to which you want to add a pseudo-element. For example, if you want to add content before a <p> element, you would replace <element> with p.
  • ::before: This is a CSS pseudo-element selector. It indicates that you want to insert content before the content of the selected HTML element. The ::before pseudo-element is often used for decorative purposes or to insert additional content before an element's actual content.
  • {content: "some text;"}: This is a declaration block enclosed in curly braces {} that specifies the properties and values for the pseudo-element. In this case, it contains the content property and its value.
  • content: The content property is used to define the content that you want to insert before the selected HTML element. In the provided example, the content is specified as "some text". You can replace "some text" with any text or even other content like images or icons.

For ::after pseudo-element it is the same as above but just it insert the content after the specified element. Syntax is as below:

<element>::after  {content: "some text";}

::before Example to Insert the Text Before an Element

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>
  • It's like a div called "btest1."
  • Inside, there's a list with three links.
  • Each link can be a clickable link to somewhere on the internet (but for now, they don't go anywhere).

Add Text Content Using CSS

#btest1 a::before {content: "🔗Link ";}

Output

::after Example to Insert the Text After an Element

Add the text "Important" at the end of every H2 heading.

HTML

<div id="atest1">
<h2>First H2.</h2>
<h2>Second H2.</h2>
<h3>This is the H3 heading, so it will not apply.</h3>
<h2>Third H2.</h2>
</div>

CSS

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.

Conclusion

In conclusion, the ability to add text content to an element using CSS through pseudo-elements such as ::before and ::after offers web developers a powerful tool for enhancing the presentation and styling of web pages. These pseudo-elements allow for the insertion of supplementary content before or after the actual content of an HTML element, providing opportunities for decorative elements, additional information, or visual cues.

By leveraging the content property and other CSS styling properties, web designers can creatively tailor the appearance of elements, making web content more engaging and visually appealing to users. Mastery of this technique opens the door to a wide range of design possibilities, enabling the crafting of dynamic and aesthetically pleasing web interfaces.

Reference:

Related Tutorials: