CSS Pseudo-elements
A pseudo-class can be defined as a keyword which is combined to a selector that defines the special state of the selected elements. Unlike the pseudo-classes, the pseudo-elements are used to style the specific part of an element, whereas the pseudo-classes are used to style the element.
As an example, a pseudo-element can be used to style the first letter or the first line of an element. The pseudo-elements can also be used to insert the content after or before an element.
Syntax
Pseudo-element has a simple syntax which is given as follows:
We have used the double colon notation (::pseudo-element) in the syntax. In CSS3, the double colon replaced the single colon notation for pseudo-elements. It was an attempt from W3C to differentiate between the pseudo-elements and pseudo-classes. So, it is recommended to use double colon notation (::pseudo-element) instead of using single-colon notation (:).
In CSS1 and CSS2, there is the use of a single colon (:) syntax for both pseudo-elements and pseudo-classes. The single colon syntax is valid for pseudo-elements in CSS1 and CSS2 for backward compatibility.
Although there are several CSS pseudo-elements, we are discussing some of the most commonly used. The widely used CSS pseudo-elements are tabulated as follows:
pseudo-element | Description |
---|---|
::first-letter (:first-letter) | It selects the first letter of the text. |
::first-line (:first-line) | It styles the first line of the text. |
::before (:before) | It is used to add something before the element’s content. |
::after (:after) | It is used to add something after the element’s content. |
::selection | It is used to select the area of an element that is selected by the user. |
Let’s discuss the above pseudo-elements, along with an example.
The ::first-letter pseudo-element
As its name implies, it affects the first letter of the text. It can be applied only to block-level elements. Instead of supporting all CSS properties, it supports some of the CSS properties that are given below.
- Color properties (such as color)
- Font properties (such as font-style, font-family, font-size, font-color, and many more).
- Margin properties (such as margin-top, margin-right, margin-bottom, and margin-left).
- Border properties (like border-top, border-right, border-bottom, border-left, border-color, border-width, and many more).
- Padding properties (such as padding-top, padding-right, padding-bottom, and padding-left).
- Background properties (such as background-color, background-repeat, background-image, and background-position).
- Text related properties (such as text-shadow, text-transform, text-decoration, etc.).
- Other properties are vertical-align (only when the float is ‘none‘) word-spacing, line-height, line-spacing, etc.
Example
Output
The ::first-line pseudo-element
It is similar to the ::first-letter pseudo-element, but it affects the entire line. It adds the special effects to the first line of the text. It supports the following CSS properties:
- Color properties (such as color)
- Font properties (such as font-style, font-family, font-size, font-color, and many more).
- Background properties (such as background-color, background-repeat, background-image, and background-position).
- Other properties are word-spacing, letter-spacing, line-height, vertical-align, text-transform, text-decoration.
Example
In this example we will see the use of ::first-line element to add special effects to the element’s first line.
Output
The ::before pseudo-element
It allows us to add something before the element’s content. It is used to add something before the specific part of an element. Generally, it is used with the content property.
We can also add the regular strings or images before the content using this pseudo-element.
Example
Output
The ::after pseudo-element
It works similar to ::before pseudo-element, but it inserts the content after the content of the element. It is used to add something after the specific part of an element. Generally, it is used with the content property.
It also allows us to add regular strings or images after the content.
Example
Output
The ::selection pseudo-element
It is used to style the part of an element that is selected by the user. We can use the following CSS properties with it:
- color.
- background-color.
- Other properties include cursor, outline, etc.
Example
Output
CSS classes and pseudo-element
The pseudo-elements can be combined with CSS classes to style the specific element having that class. The syntax of combining the CSS classes with the pseudo-elements is given below.
Syntax
It can be written as:
Example
This example will affect the first letter of those <h1> elements that have class=”example” rather than affecting the all <h1> elements.
Output