CSS Pseudo Elements

A pseudo-element is a keyword added to a selector that lets you style specific parts of an element. For example, you can style the first line of a paragraph, add content before or after an element, or create complex effects with minimal code. Pseudo-elements are denoted by a double colon (::) (or : in legacy CSS).

Syntax

selector::pseudo-element{
 property: value
}

::(the double colon is a syntax for pseudo-elements)

Commonly Used CSS Pseudo-Elements

1. ::before

The ::before pseudo-element allows you to insert content before the actual content of an element.

2. ::after

Similar to ::before, the ::after pseudo-element inserts content after the element’s content. It is often used to add icons, styling cues, or additional details.

3. ::first-letter

The ::first-letter pseudo-element targets the first letter of a block of text, generally used for decorative initials in paragraphs.

4. ::first-line

The ::first-line pseudo-element is used to style the first line of a block of text. It is particularly useful for emphasizing the introduction of paragraphs.

5. ::placeholder

The ::placeholder pseudo-element styles placeholder text inside input fields.

6. ::marker

Styles the marker of list items.

7. ::selection

Styles the selected text.

8. ::backdrop

Styles the backdrop of modal elements like <dialog>. It helps to style the background of the dialog box opened as a modal on the screen of the user.

Pseudo-elements for Specific Contexts

::file-selector-button for Media and Interactivity

This pseudo-element selector helps to style the button of a input type file.

::spelling-error for Error Handling

The ::spelling-error pseudo-element styles text that has been flagged as a spelling error by the browser's spell-check functionality.