CSS Pseudo Elements: A Definite Guide

Published in

StackAnatomy

6 min readDec 6, 2022

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 that are 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 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 either 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 Element

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

Pseudo Elements Description

::before

This inserts the specified content before the element selected

::after

This inserts the specified content after the element selected

::first-letter

This is used to style the first letter of the element selected

::first-line

This selects the first line of the element selected

::selection

This selects and adds styles to the part of the document that the user has highlighted

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 feature mentioned above. 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:

Open Source Session Replay

OpenReplay is an open-source, session replay suite that lets you see what users do on your web app, helping you troubleshoot issues faster. OpenReplay is self-hosted for full control over your data.

Start enjoying your debugging experience — start using OpenReplay for free.

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

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.