CSS Pseudo Elements

The pseudo-elements allow you to style the elements or parts of the elements without adding any IDs or classes to them.

It will be really helpful in the situations when you just want to style the first letter of a paragraph to create the drop cap effect or to insert some content before or after an element, etc. only through the style sheet.

::first-line Pseudo-element

The ::first-line pseudo-element applies a special style to the first line of a text.

The style rules in the following example format the first line of text in a paragraph. The length of the first line depends on the size of the browser window or the containing element.

Example:

p::first-line {

text-transform: uppercase;

font-weight: bold;

background-color: yellow;

}

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

::first-letter Pseudo-element

The ::first-letter pseudo-element applies a special style to the first letter of the first line of a text.

The style rules in the following example format the first letter of the paragraph of text and create the effect like drop cap.

Example:

p::first-letter {

text-transform: uppercase;

font-weight: bold;

color: blue;

}

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

::after Pseudo-element

The ::after pseudo-elements can be used to insert some content after an element’s content. The below example inserts an image after the content of each <p> element.

Example:

p::after {

content: url(sample.jpg);

}

::before Pseudo-element

The ::before pseudo-elements can be used to insert some content before an element’s content. The below example inserts an image before the content of each <p> element.

Example:

p::before {

content: url(sample.jpg);

}

::selection Pseudo-element

The ::selection pseudo-element changes the style of the portion of an element that is selected by a user.

You can change the color, background-color, cursor, and outline property of the selected portion.

Example:

::selection {

background-color: blue;

color: white;

}

Pseudo-elements and CSS Classes

If you want to style certain paragraphs of text or other block-level elements then use pseudo-elements with a CSS class.

Example:

p.demo::first-line {

background-color: blue;

color: white;

}

You Are Here

CSS Pseudo Elements

::first-line Pseudo-element

Example:

::first-letter Pseudo-element

Example:

::after Pseudo-element

Example:

::before Pseudo-element

Example:

::selection Pseudo-element

Example:

Pseudo-elements and CSS Classes

Example:

Ask a Question Cancel reply