CSS Pseudo Elements: A Definite Guide

Cascading Style Sheet (CSS) pseudo-elements are a handful of CSS features that help us keep our Hypertext Markup Language (HTML) minimal by adding and modifying it directly from the CSS code. For example, you may want to add text before a particular HTML element used in multiple places in the entire code. As we progress in this tutorial, we will examine different CSS pseudo-elements and how to apply them.

At the end of this article, we’ll have fully grasped the concept behind CSS Pseudo Elements and how to apply them.

You’ll need a fundamental knowledge of CSS to follow along with the code samples and understand the terminologies used in the article.

What are CSS Pseudo Elements?

Pseudo Elements are elements virtually added to the HTML via CSS code. These elements do not exist in the Document Object Model (DOM). In simple terms, pseudo-elements are elements that can be visualized on the webpage but are created using CSS.

Note: Without using the content property, pseudo-elements won’t reflect.

Pseudo Elements syntax: CSS 2 vs. CSS 3 syntax

The syntax changes between CSS versions:

CSS 2 Syntax

selector:pseudo-element {
      property: value;
}

CSS 3 Syntax

selector::pseudo-element {
     property: value;
}

The pseudo-element was initially introduced in CSS2. At that time, the writing convention for declaring a pseudo-element was that a single colon (:) comes before the pseudo-element text. But now, in CSS3 we use a double colon (::) before the pseudo-element text. This approach was introduced mainly to differentiate between pseudo-classes and pseudo-elements.

It is believed that if you use any of the two pseudo-elements writing conventions, your code will still work. However, some pseudo-elements only support usage with a double colon (::). Hence, it is advisable to always use a double colon (::) when using pseudo-elements and a single colon (:) when using pseudo-classes.

As we continue this article, pseudo-elements that support single and double colons will be shown with their respective notation.

Types of Pseudo Elements

For this article, we will only examine five types of pseudo-elements to keep things concise. A study has it that these five types of pseudo-elements are the ones you will often use. The following are the five different CSS pseudo-elements to be discussed:

• ::before
• ::after
• ::first-letter
• ::first-line
• ::selection

Application/Usage of Pseudo-Elements

Note: To use pseudo-elements, you must first declare the content property and assign it a value. The content property can be assigned the following values and is not limited to these value types:

• String

    Selector::pseudo-element {
        Content: "string";
    }

• Empty String

    Selector::pseudo-element {
        Content: "";
    }

• Url pointing to an image

    Selector::pseudo-element {
        //Just like how background-images are declared
        Content: url(“link to image goes in here”);
    }

Note: when using the URL reference as the content property value, you shouldn’t wrap it in quotation marks. Wrapping it in quotation marks makes it be regarded as a string and not a URL reference; thereby, a string value is returned.

For example:

Selector::pseudo-element {
    Content: "url("link to image goes in here")";
}

The code snippet above will return this string - url() as the content property value.

::before (:before)

This pseudo-element adds content before the selected Hypertext Hypertext Markup Language (HTML) element. As the name implies, this pseudo-element adds the value assigned to the content property before the selected/targeted element.

Selector::before {
  content:" ";
}

We will use the ::before pseudo-element to add a particular text to a group of list items. In place of the text, you can use the url() to add a link to an image to the front of the HTML element you selected.

Demo:

::after (:after)

The ::after pseudo-element adds content after an HTML element. Like its counterpart (the ::before pseudo-element), this pseudo-element also inserts content, but it’s after the selected element.

Selector::after {
  content:" ";
}

Just like the example above, we will use this pseudo-element to display content after selecting the HTML element.

Demo:

Note: the two pseudo-elements discussed above are the most used.

::first-letter (:first-letter)

We often see text whereby the first letter covers one line or more. This letter starts the first word on the number of lines it covers. The ::first-letter pseudo-element is the key to implementing the aforementioned feature. In simple terms, this pseudo-element selects and styles the first letter of the selected element.

Selector::first-letter {
  content:" ";
}

Here, we will take a look at how to use this pseudo-element.

Demo:

You are limited to a set of CSS properties when using this pseudo-element. Properties about layout, such as position, display, and so on, can’t be modified. Also, the browser compatibility for digraphs is very low when using this pseudo-element.

::first-line (:first-line)

This ::first-line pseudo-element targets just the first line of the selected element and styles it provided it’s a block-level element, not the inline block-level element.

Selector::first-line {
  content:" ";
}

Let’s take a look at how we can apply this pseudo-element.

Demo:

::selection (:selection)

The ::selection pseudo-element targets any highlighted section on the webpage. When using this pseudo-element, you are limited to specific properties such as color, outline, background, etc.

Note: this pseudo-element can be used globally in the webpage, whereby any element highlighted gets the defined styles. Below is the syntax for using this pseudo-element globally and for a specific element.

//global element syntax
::selection {
  content:" ";
}

//specific element syntax
Selector::selection {
  content:" ";
}

Try highlighting the paragraph and any other text in the demo; you will see the style applied.

Demo:

Combination Of the ::before and ::after pseudo-elements

In this segment, we will take a deeper look at the two most common pseudo-elements as we will build a simple card box with a default loader design.

Here is the demo:

Resources

• MDN docs
• W3schools

Conclusion

In this article, we learned how to style the content on our webpage using the most used pseudo-elements. Using the example scripts in the demo area, we also learned about the guidelines for using pseudo-elements, when to use them, and how to apply them.

A TIP FROM THE EDITOR: Do not miss our Modern CSS Selectors article for more on current CSS features!

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs and track user frustrations. Get complete visibility into your frontend with OpenReplay, the most advanced open-source session replay tool for developers.

Check our GitHub Repo