CSS Pseudo Elements Every Developer Should Know about

Pseudo-elements are used to select styles and are applied to specific elements or parts of elements in the DOM.

What is a Pseudo Element?

Pseudo-elements are used to select styles and are applied to specific elements or parts of elements in the DOM.

Pseudo-elements are indicated by the (::) symbol.

Multiple pseudo-elements can be used for a single element.

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

Here is an example:

Pseudo-elements help to apply styles to the first letter or line of an HTML element.

There are six pseudo-elements. Let’s take a look at each with an example.

1) ::first-line

::first-line pseudo-elements help select styles and apply styles to the first line of text, paragraphs, and headings.

For the ::first-line element, we can only apply it to these attributes: The font, color, background, word – spacing, the letter spacing, the text – decoration, vertical – align text – the transform, the line – height and clear.

Note: The pseudo-element :first-line applies only to block-level elements.

Here’s an example:

HTML

CSS

p::first-line { color: green; }

2) ::first-letter

::first-letter pseudo-elements help select and apply styles to text and the first letter of paragraphs and headings.

For the ::first-letter element, we can only apply it to these attributes: The font, color, background, margin, padding, border, text decoration, vertical – align (only if “float” is “None”), the text – the transform, the line – height, float and clear.

For example:

HTML

CSS

p::first-letter { color: red;

font-size: 18px; }

3) ::before

::before Pseudo-elements help to add or insert content before the content of the element.

Example:

HTML

CSS

p::before { content: url(smiley.gif); }

4) ::after

::after Pseudo-elements help to add or insert content after the content of an element.

Ex. :

HTML

CSS

p::after { content: url(smiley.gif); }

5) ::marker

The ::marker pseudo-element helps to apply styles to the ORDER attribute and to de-order the attribute list.

Example:

HTML

  • Attractive Aurora

  • Attractive

  • Aurora

CSS

::marker { color: red; }

6) ::selection

:: Selection pseudo-elements help to apply styles to user-selected text.

:: Selection Pseudo-elements accept a minimum number of CSS attributes.

: : selection pseudo elements support colors, background, the outline and the cursor.

Ex. :

HTML

CSS

::selection { color: red; background: yellow; }

I think this article might be useful to you:

Thanks for reading, and don’t forget to comment and share