CSS Pseudo-elements

The CSS pseudo-elements are a way to style document elements that weren't explicitly defined by a position in the document tree.

What is Pseudo-element

You can use the CSS pseudo-elements to style the elements or their parts without adding any classes or IDs to them. Pseudo-elements are useful when you want to style the first letter of a paragraph to create the drop cap effect or insert some content before or after an element, etc., only through the style sheet.

A new double-colon (::) syntax for pseudo-elements was introduced by CSS3 to distinguish between pseudo-elements and pseudo-classes. You can give the new syntax of the pseudo-element with:

selector::pseudo-element { property: value; }

The most commonly used pseudo-elements are as follows:

The ::first-line Pseudo-element

It applies a special style to the first line of a text.

In the example below, the style rules format the paragraph's first line of text. The first line's length depends on the size of the browser window or containing element.

Example :

p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}

Try With Example

Note: The CSS properties that you can apply to the ::first-line pseudo-element are: background properties, font properties, letter spacing, word-spacing, color, text-decoration, text-transform, vertical-align, line-height.

The ::first-letter Pseudo-element

You can use the ::first-letter pseudo-element to add a special style to the first letter of the text's first line. In the following example, the style rules format the first letter of the text paragraph and create the effect such as a drop cap.

Example:

p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}

Try With Example

Note: The CSS properties that you can apply to the ::first-letter pseudo-element are: text-decoration, font properties, letter-spacing, text-transform, line-height, word-spacing, color, float, vertical-align (only if 'float' is 'none'), border properties, margin and padding properties, background properties.

The ::before and ::after Pseudo-element

You can utilize the ::before and ::after pseudo-elements to insert generated content either before or after the content of an element. In addition, you can use the content CSS property in conjunction with these pseudo-elements for inserting the generated content.

This property is very helpful for decorating an element further with rich content that should not be part of the actual markup of the page. Using these pseudo-elements, you can insert regular text strings or an embedded object like an image and other resources.

Example :

h1::before {
        content: url("/assets/example-image/flower.jpg");
    }
    h1::after {
        content: url("/assets/example-image/flower.jpg");
    }

Try With Example

Pseudo-elements and CSS Classes

We usually style only a particular paragraph of text or other block-level elements using pseudo-elements. This is where declaring a class to the pseudo-element comes into play. You can combine the pseudo-elements with the CSS classes to produce the effect, particularly for the elements having that class.

In the example below, the style rules will display the first letter of all paragraphs with the class="article" in green and size of xx-large.

Example :

p.article::first-letter {
    color: #00ff00;
    font-size: xx-large;
}

Try With Example