CSS pseudo elements

The pseudo elements are those elements that are not a part of the document tree. They are abstract type elements. For example, element::first-line pseudo class formats the first line of an element. And this line is different from the other portion of the element.

The following is the list of the pseudo elements.

1. ::first-line

This pseudo element selects the first line of the element and applies the CSS poperties that make it different from rest of the content after being wrapped.

<style>
p::first-line{
 font-size:20px;
 color:blue;
}
</style>

The font-size and color of the first line of every paragraph is different from rest of the content.

2. ::first-letter

This pseudo element selects the first character of the originating element and applies CSS properties.

<style>
p::first-letter{
 font-size:20px;
}
</style>

It means the first letter of every paragraph will be in uppercase form.

3. ::selection

::selection pseudo element allows the formatting of text highlighted by the user.

<style>
div::selection{
 background-color:lightgreen
 color:white;
}
</style>

The background-color of the highlighted content is lightblue.

4. ::after

This is child pseudo element that adds content after the originating element's original content.

<style>
div::after{
 content:"!";
}
</style>

5. ::before

::before is a child pseudo element that adds content before the originating element's content.

<style>
div::before{
 content:"Tip: ";
}
</style>

It can add autoamtically generated markers before the list items. It can format the list item markers.

6. ::placeholder

::placeholder pseudo element represents placeholder text that hints the user about what kind of data is to be entered in the input field.

<style>
input::placeholder{
 color:blue;
}
</style>

The color of placeholder text is blue.

See CSS selectors cheat sheet