CSS Lesson 16: Pseudo Elements


Introduction to CSS Pseudo Elements

In the previous lesson you learned about the Pseudo Classes. Here we’ll teach you about the Pseudo Elements. Normally, the usage of both the Pseduo Class and Elements is the same, but look below and check out the difference!

Difference between Pseudo Class and Elements

Pseudo Class Pseudo Class defines the state of elements e.g. anchor links.
Pseudo Elements Pseudo Elements are used to define the specific part of the elements e.g. first letter of line.


The syntax of Pseudo ElementsĀ is given below:

You can see that the Pseudo Element and Pseudo Class have the same syntax. Instead of a single colon (:), the Pseudo Element will have double colons (::).


Let’s give you a few examples of Pseudo-Elements to give you a better understanding. Let’s Get Started!


As stated earlier, Pseudo Elements are used to target the specific part of an Element. So in this example, the specific part is the first letter of the text. Here is the demonstration:

Source Code Output

First Letter of this text is in a blue color due to the first-letter Pseudo Element.


If you want to change the color or font of the first line of a paragraph, you can simply use the <::first-line> element. It’s very easy to use, and you can learn it in seconds if you keep eating’ your greens!

Source Code Output

This is the first line of a paragraph. We are using the first-line pseudo element to change its color. It will effect only the first line of the paragraph, while the other line remains the same.

List of Pseudo-Element

There are more than two Pseudo Elements, o check out the complete List of Pseudo Element

Next Lesson

In the next lesson you’ll learn about the Display

Leave a Reply