CSS Pseudo Elements: A Definite Guide
Tags: css, webdev
Published: 2022-11-02 23:34:01

by [Bobate Olusegun](https://blog.openreplay.com/authors/bobate-olusegun)

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

|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**:
<iframe height="300" style="width: 100%;" scrolling="no" title="before" src="https://codepen.io/shegz101/embed/preview/OJZqzyq?default-tab=html%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/shegz101/pen/OJZqzyq">
  before</a> by Shegz (<a href="https://codepen.io/shegz101">@shegz101</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### ::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**:
<iframe height="300" style="width: 100%;" scrolling="no" title="after" src="https://codepen.io/shegz101/embed/preview/vYjPdBq?default-tab=html%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/shegz101/pen/vYjPdBq">
  after</a> by Shegz (<a href="https://codepen.io/shegz101">@shegz101</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

**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**:
<iframe height="300" style="width: 100%;" scrolling="no" title="first-letter" src="https://codepen.io/shegz101/embed/preview/gOzEdgq?default-tab=html%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/shegz101/pen/gOzEdgq">
  first-letter</a> by Shegz (<a href="https://codepen.io/shegz101">@shegz101</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

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**:
<iframe height="300" style="width: 100%;" scrolling="no" title="first-line" src="https://codepen.io/shegz101/embed/preview/QWrPLMg?default-tab=html%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/shegz101/pen/QWrPLMg">
  first-line</a> by Shegz (<a href="https://codepen.io/shegz101">@shegz101</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### ::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**:

<iframe height="300" style="width: 100%;" scrolling="no" title="selection" src="https://codepen.io/shegz101/embed/preview/vYjMBVN?default-tab=html%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/shegz101/pen/vYjMBVN">
  selection</a> by Shegz (<a href="https://codepen.io/shegz101">@shegz101</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>



<h2>Open Source Session Replay</h2> 

_<a href="https://github.com/openreplay/openreplay" target="_blank">OpenReplay</a> 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._

![OpenReplay](https://blog.openreplay.com/banner-blog_1oYPGT.png)

_Start enjoying your debugging experience - <a href="https://github.com/openreplay/openreplay" >start using OpenReplay for free</a>._




## 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:
<iframe height="335.33331298828125" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/shegz101/embed/preview/yLjZjXM?default-tab=html%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/shegz101/pen/yLjZjXM">
  Untitled</a> by Shegz (<a href="https://codepen.io/shegz101">@shegz101</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

## Resources
- [MDN docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)
- [W3schools](https://www.w3schools.com/css/css_pseudo_elements.asp)

## 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](https://blog.openreplay.com/modern-css-selectors/) article for more on current CSS features!




[![newsletter](https://blog.openreplay.com/newsletter_Z1P0UIP.png)](https://newsletter.openreplay.com/)