Type to generate custom UI components with AI

Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

How to Use the CSS Content Property: CSS After and Before

Have you ever asked yourself if there might be a way to add an element to your web page without actually affecting the change in your HTML file? Well, worry no more, the CSS content property helps you get it done.

The content property in CSS is a very essential tool as it is often used by many and in most cases can be misunderstood based on how the pseudo-elements work.

Furthermore, the CSS content property works alongside pseudo-elements which are used to style specified parts of an element in a web page.

In this article, I will walk you through all you need to know about the CSS content property, and the CSS Pseudo-Elements and will show you examples of how to use this wonderful CSS property.

Let’s dive right in 🚀

What is CSS Content Property?

The CSS content property is used to add additional content to a webpage. This property is used alongside the::before and::after elements also known as Pseudo-Elements to insert content before or after an element’s actual content.

Pseudo-elements generally are known as important keywords you can add to a selector in your CSS which enables you to give styles to specified selected elements.

Prerequisite

The pseudo-elements are a very essential part of CSS and are often misunderstood by many users and due to this fact, you must become very familiar with how these pseudo-elements work.

Want to skip the reading and just dive into a video tutorial? Check out this YouTube video below:

How to Use CSS Pseudo-Elements – Before and After

The CSS :before and :after properties are what also known as pseudo elements. They are used to add something before or after the content of an element. There are a lot of great uses for these pseudo elements, and we are here to explore some of them

You can use the CSS ::before selector to insert content before the content of the selected element(s). For example, you can prepend an asterisk and space before every paragraph element or prepend “Comment: ” in blue before every span element with the comment class.

Here is an example;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Content Property</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1 class="first_div">
    My first Div Element
  </h1>
</body>
</html>

CSS style;

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size:2rem ;
}

.first_div::before {
  content: "Hi there, this is";
}

The Example above shows you clearly how the content property can be used alongside the ::before element to insert content before the content of the selected element.

From the example, the h1 element with the class of first_div has a content of My first Div Element. Thus, in the style.css file, we are prepending Hi there, this is to the h1 element.

Final Display Example

Therefore the final display should look like this on the web page;

Similarly, you can use the ::after selector to insert content after the content of the selected element(s). For example, you can append ” – Buzz Lightyear” in blue to elements with the Buzz class or append ” – Yoda” in green to elements with the yoga class.

Here is an example;

<body>

  <p>My second Paragraph.</p>

</body>
</html>

CSS style;

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5rem;
}

p::after {
  content: "Thank you";
  text-decoration: underline;
  font-size: 5rem;
}

Here is how it looks on a web page.

There is some discussion around using the single colon (:before) versus double colon (::before) notation for pseudo-elements. The double colon is the CSS3 recommended notation to distinguish between pseudo-classes and pseudo-elements.

However, for compatibility reasons, the single colon method is still accepted. However, just keep in mind that IE8 only supports the single colon notation.

For more clarity, it is important to note that the ::before element applies before the content of the specified HTML tag while the::after element applies immediately after the content of the specified HTML tag. There it is all included inside the HTML tag itself.

If you are working on a CSS project, and you want to be 5x more productive, you want to skip the boring part of writing each piece of code yourself, check out our AI-generated custom components for CSS. This allows you to quickly get started on your project.

Accepted Values of the CSS Content Property

  • normal: This property sets the content of a specified element to normal (its default value).

  • none: This property just as the name implies sets a specified element to nothing (No pseudo-element generated)

  • <string>: This property sets the content to the particular text you specify (Unicode escape sequences possible).

  • <image>: This property Sets content as an image or gradient with the use of the URL() or linear-gradient() property.

  • open-quote | close-quote: This property is used to set content to appropriate quote characters from the quotes property.

  • no-open-quote | no-close-quote: Remove a quote from the element, adjusting the nesting level

  • attr(*attribute*): Set content as the string value of the selected attribute

  • counter(): Set content as the value of a counter

String

This is one of the basic ways of adding content before or after an element. The string property is a sequence of characters enclosed in either single or double quotes and enables content to be displayed on the web page.

Here is an example;

<div class="first_div">This is used for a string property</div>

CSS style;


.first_div::before{
  content: " ";
}

.first_div::after{
  content: " Return";
  color:"#ffff";
}

Basic Quotes

Using the CSS content property, you can easily add quotation marks/symbols to speech or text written or spoken by someone.

Here is an example of adding a basic quote to a text;

<body>
   <p class="quote">Learn from yesterday, live for today, and hope for tomorrow. The important thing is not to stop questioning.</p>
</body>

css style;

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-style: italic;
  text-align: center;
  font-size: 3rem;
}

.quote::before {
  content: "'";
}

.quote::after {
  content: "'";
}

From the code above, a single quotation mark is placed ::before and ::after in the content of the specified HTML class (quote).

Here is what it looks like on the webpage;

You can also make use of the CSS open-quote and close-quote content properties to add quotation marks to desired text of your choice. Here is an example;

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-style: italic;
  text-align: center;
  font-size: 3rem;
}

.quote::before {
  content: open-quote;
  font-size: 5rem;
}

.quote::after {
  content: close-quote;
  font-size: 5rem;
}

Here is the result;

Advanced Quotes

The advanced method of adding quotes to text comes into play in situations where more than one quote from various individuals is put together therefore making it a compilation of quotes from different people. This most times can lead to confusion on the end of the readers.

At this point, you can use the HTML <q> tag for this method. The <q> is an HTML element tag that automatically adds quotes to text within an HTML file.

Example;

<body>
    <p><q> My mom always said to me: <q class="none"> Son good shoes will take you to good places but <q> Bad shoes have its limits.</q></q> Take it or leave it.</q></p>
  </body>

q {
  quotes: "“" "”" "‘" "’" "“" "”";
}

q::before {
  content: open-quote;
}

q::after {
  content: close-quote;
}

.none::before {
  content: no-open-quote;
}

.none::after {
  content: no-close-quote;
}

From the code example above, you can see how different quotes are nested into each other using the <q> tag in the HTML file. This is what we refer to as an array of quotes.

From the CSS file, the open-quote, close-quote, no-open-quote, and no-close-quote are used to specify where a quote should be and where a quote shouldn’t be.

Here is the result;

Attributes

The attribute property is a part of the content property that allows you to pass content values from HTML elements into the CSS. This property can be used to define what is rendered inside an element or pseudo-element.

Tooltip is a perfect example for explaining the attribute property as it is often used to specify/give extra information about an element whenever the mouse pointer hovers over an element.

Here is an example;

<body>
    <div class="tooltip" data-tooltip="Talks about his money"> Hello, What o you have for me today?
    </div>
  </body>

.tooltip {
  font-size: 4rem;
  margin: 5rem;
  position: relative;
}

.tooltip::before {
  content: "";

}

.tooltip::after {
  content: attr(data-tooltip);
  display: block;
  background-color: #808080;
  color: #ffff;
  font-size: 2rem;
  border: 1px solid #808080;
  border-radius: 5rem;
  padding: 0.30em 0.30em;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.tooltip:hover::before,
.tooltip:hover::after {
  opacity: 1;
}

Counters

The Counter property is one of the vital content properties in CSS that enables you to adjust the appearance of content based on its placement in the document. This property can be beneficial for counting or automatically numbering repeating elements existing on a page such as h1, h2, ol, ul tags, etc.

  • The counter property has a few properties it works with and they include; counter-reset, counter-increment, content, and counter-function.

  • counter-reset: This property is used to reset the value of a counter element to 0 or none.

  • counter-increment: This property is used to increase the value of a counter.

  • content: Used to insert generated content.

  • counter-function: Used to add the value of a counter to an element.

Here is an Example;

<body>
  <h1>Take out Week</h1>
    <h2>Sunday</h2>
    <h2>Monday</h2>
    <h2>Tuesday</h2>
    <h2>Wednesday</h2>
    <h2>Thursday</h2>
    <h2>Friday</h2>
    <h2>Saturday</h2>

  <h1>Brunch Week</h1>
    <h2>Sunday</h2>
    <h2>Monday</h2>
    <h2>Tuesday</h2>
    <h2>Wednesday</h2>
    <h2>Thursday</h2>
    <h2>Friday</h2>
    <h2>Saturday</h2>
</body>

CSS style;

 body {
  counter-reset: x;
  font-size: 0.75rem;

}

h1 {
  counter-reset: y;
}

h1::before {
  counter-increment: x;
  content: "Week" counter(x) ":" ;
}

h2::before {
  counter-increment: y;
  content: "Day" " "counter(y) ":";
}

Result;

Images

Image properties can only be used along the content property. That is to say, you cannot add a pseudo-element to an image tag when it is not created with the content property.

Here is an Example;

<body>
  <div class="images">
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem fuga possimus maxime nam beatae non mollitia quo consequatur laborum, odit dolores magnam a, molestias sunt et quod esse fugit excepturi, tenetur amet? Iure saepe perferendis voluptas est amet eligendi eos?</p>
    </div>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit voluptatibus alias deserunt modi cupiditate placeat animi laborum molestiae sequi? Itaque numquam amet velit earum sint labore! Rerum neque, alias pariatur voluptatem laboriosam, fuga, placeat numquam totam praesentium quo incidunt minima!</p>
</body>

CSS style;

  .images::before{
    content: url(<https://images.unsplash.com/photo-1702470714576-4f3f73cea3be?q=80&w=871&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D>);
    display: block;
    width: 100%;
    height: 500px;
    overflow: hidden;
}

Result;

Outside of Pseudo Elements

The content property can also be used in cases outside of the pseudo-elements (::before and ::after) but it also has its limitations and is not fully compatible with all browsers.

The common use case of the content property outside the pseudo-elements would be in replacement of an element.

Table Summarizing Key Points About the CSS Content Properties

Feature::before::after
DescriptionInserts content before the content of an elementInserts content after the content of an element
Usageelement::before {content: "text"}element::after {content: "text"}
Content typesStrings, images, counters, attributes, etc.Strings, images, counters, attributes, etc.
Key benefitAdd content without editing HTMLAdd content without editing HTML
Browser supportIE8+IE8+
Common usesPrepending icons, tooltips, opening quotesAppending icons, tooltips, closing quotes

Some key differences:

  • ::before adds content before an element’s content
  • ::after adds content after an element’s content
  • Both allow you to insert content without editing the HTML
  • Support and usage is generally the same otherwise

FAQs (Frequently Asked Questions)

What is the ::after pseudo-element in CSS?

The ::after pseudo-element in CSS allows you to insert content onto a page after the content of the selected element. This is useful for adding cosmetic content, text, or images.

How do you add text using::before and ::after?

Use the content property along with ::before and ::after. For example:

p::before {
  content: "Start of the paragraph: ";
}

p::after {
  content: " End of paragraph.";
}

What is the difference between :before and ::before?

The double colon (::) notation was introduced in CSS3 as a way to distinguish between pseudo-classes and pseudo-elements. The single colon (:) notation still works for browser compatibility reasons, but the double colon is considered best practice.

How do you use ::before and ::after to add images?

Use the content property with the URL() value:

.class::before {
  content: url(image.jpg);
}

What are some common use cases for ::before and ::after?

Some common uses:

  • Adding icons next to links or buttons
  • Creating tooltip captions
  • Styling quotes with opening and closing quote marks
  • Adding numbers to ordered list items

What should I consider for browser compatibility with CSS pseudo-elements?

Double-check browser support for the features you want to use, as support may be limited, especially in older browsers. Use prefixes like -webkit- and -moz- where needed.

What You Have Learned

In this article, you have learned about the CSS content property and how to use it alongside the ::before and ::after pseudo-element.

The content property in CSS is a very essential tool as it is often used by many and in most cases can be misunderstood based on how the pseudo-elements work.

Moreso, the ::before and ::after pseudo-elements work alongside the content property to append or prepend content on the web page without having to alter the HTML file.

Also, the CSS counter property is one of the vital content properties in CSS that enables you to adjust the appearance of content based on its placement in the document. This property can be beneficial for counting or automatically numbering repeating elements existing on a page such as h1, h2, ol, ul tags, etc.

The counter property has a few properties it works with and they include; counter-reset, counter-increment, content, and counter-function.

Check out Purecode.ai for all you need to quickly create responsive re-usable CSS components for your web projects.

Check out this YouTube video to further learn more:

Further Readings

If you enjoyed reading this piece, be sure to check other great tutorials on our blog:

Emmanuel Uchenna

Emmanuel Uchenna

Emmanuel is an experienced and enthusiastic software developer and technical writer with 4+ proven years of professional experience. He focuses on full-stack web development. He is fluent in React, TypeScript, VueJS, and NodeJS and familiar with industry-standard technologies such as version control, headless CMS, and JAMstack. He is passionate about knowledge sharing.