# 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.

## Prerequisites
To follow along with the code samples and understand the terminologies used in the article, you’ll need a fundamental knowledge of CSS.

## The Pseudo Elements
### 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: CSS2 vs CSS3 syntax
The syntax:

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 now 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 with this article, pseudo-elements that support both single and double colons will be shown with their respective notation.

## Types of Pseudo Elements
For this article, we would only examine five types of pseudo-elements in order to keep things concise. 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 add styles to the part of the document that the user has highlighted|

## Application/Usage of Pseudo-Elements
**Note**: In order to use pseudo-elements, you need to first declare the `content` property and assign it a value. The `content` property can be assigned the following values and are 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 to 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 is used to add content just 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.

#### Syntax

Selector::before {
	content:” “;
}

### Usage
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 is used to add content after an HTML element. Just like its counterpart (the `::before` pseudo-element), this pseudo-element also inserts content but it's after the selected element.

#### Syntax

Selector::after {
	content:” “;
}

#### Usage
Just like the example used above, we will use this pseudo-element to display content after the HTML element we select.

**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 pseudo-elements.

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

#### Syntax

Selector::first-letter {
	content:” “;
}

#### Usage
Here, we would 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>

When using this pseudo-element, you are limited to a set of CSS properties to use. Properties pertaining to 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.

#### Syntax

Selector::first-line {
	content:” “;
}

#### Usage
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 certain 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.

#### Syntax

//global element syntax
::selection {
	content:” “;
}

//specific element syntax
Selector::selection {
	content:” “;
}

#### Usage
Try to highlight 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>

## Combination Of the ::before and ::after pseudo-element.
In this segment, we would take a deeper look at the two most common pseudo-element as we are going to build a simple card box that has 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 that appears on our webpage by using the most used pseudo-elements. Through the usage of 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.

Please leave any questions you may have in the comment section.