CSS Pseudo-elements- CSS Course

CSS Pseudo-elements

What are pseudo-elements

CSS pseudo-elements allow styling specific parts of an element or adding decorative content without modifying the HTML structure. They are written with two colons (::) and are useful for visual effects, typography, and subtle interactions.

Categories of CSS pseudo-elements

CSS pseudo-elements can be grouped based on their role in styling content. Below are the most well-known and commonly used:

• Decorative:
  • ::before — adds content before the element's actual content
  • ::after — adds content after the element's actual content
• Typographic:
  • ::first-letter — styles the first letter of a text block
  • ::first-line — styles the first line of a paragraph
• Forms and interaction:
  • ::placeholder — styles the placeholder text of an input
  • ::selection — styles the text selected by the user

All pseudo-elements are written with two colons (::), according to the CSS3 standard, to differentiate them from pseudo-classes that use a single colon (:).

Complete list of CSS pseudo-elements

Below are all pseudo-elements defined in the CSS specifications, organized alphabetically:

• A
  • ::after
• B
  • ::backdrop
  • ::before
• C
  • ::column
  • ::checkmark
  • ::cue and ::cue()
• D
  • ::details-content
• F
  • ::file-selector-button
  • ::first-letter
  • ::first-line
• G
  • ::grammar-error
• H
  • ::highlight()
• M
  • ::marker
• P
  • ::part()
  • ::picker()
  • ::picker-icon
  • ::placeholder
• S
  • ::scroll-button()
  • ::scroll-marker
  • ::scroll-marker-group
  • ::selection
  • ::slotted()
  • ::spelling-error
• T
  • ::target-text
• V
  • ::view-transition
  • ::view-transition-image-pair()
  • ::view-transition-group()
  • ::view-transition-new()
  • ::view-transition-old()

Some of these pseudo-elements are experimental or have limited browser support. It is recommended to check compatibility on Can I use before using them in production.

The CSS pseudo-elements presented below are the most frequently used in modern web development. They allow manipulating and styling specific parts of HTML elements without directly altering the structure, thus providing advanced control over visual presentation and user interface.

::before

Description: Adds content before the actual content of an element. It is used for decoration, icons, markers, or visual effects.

Usage: Applied to elements that can contain text and requires the content property in CSS to work.

Compatibility: Supported on all modern browsers.

Example: Adds an emoji before a heading.

::after

Description: The ::after pseudo-element inserts content immediately after the actual content of an element. It is commonly used for decoration, adding symbols, icons, or additional visual elements.

Usage: Applied to elements that can contain text and requires the content property in CSS to work. Can be combined with other CSS properties to create complex effects.

Compatibility: Supported on all modern browsers, including Chrome, Firefox, Edge, and Safari.

Example: Adds a ✔️ symbol after a paragraph.

::first-letter

Description: The ::first-letter pseudo-element allows styling only the first letter of a block of text. It is useful for typographic effects, such as drop caps in articles, blogs, or quotes.

Usage: Applied to block elements (e.g., <p>, <div>) and can be combined with properties like font-size, color, float, font-weight.

Compatibility: Supported on all modern browsers. Does not work on inline elements.

Example: The first letter of the paragraph is styled differently.

::first-line

Description: The ::first-line pseudo-element allows styling only the first visible line of a block of text. It is useful for highlighting the introduction of a paragraph or for subtle typographic effects.

Usage: Applied to block elements (e.g., <p>, <div>) and can be combined with properties like font-style, font-weight, color, letter-spacing, word-spacing, text-decoration.

Compatibility: Supported on all modern browsers. Does not work on inline elements and cannot be used for layout (e.g., margin, padding).

Example: The first line of the paragraph is styled differently.

::placeholder

Description: The ::placeholder pseudo-element allows styling placeholder text in form fields, such as <input> or <textarea>. It is useful for customizing the interface and improving user experience.

Usage: Applied directly to form elements that have the placeholder attribute. Can be combined with properties like color, font-style, opacity, font-size.

Compatibility: Supported on all modern browsers. Prefixes ::-webkit-input-placeholder and ::-moz-placeholder may be required for extended compatibility.

Example: The placeholder text is styled with a different color and font.

::selection

Description: The ::selection pseudo-element allows styling text selected by the user with the mouse or keyboard. It is useful for customizing the visual experience when interacting with content.

Usage: Applied to any element that contains text. Can be combined with properties like color, background-color, text-shadow. Not all CSS properties are supported.

Compatibility: Supported in most modern browsers. For extended compatibility, prefixes like ::-moz-selection and ::-webkit-selection can be used.

Example: Selected text is highlighted with a custom background.

Advanced pseudo-elements

In addition to the established and fully supported CSS pseudo-elements, there are a number of advanced pseudo-elements introduced in recent specifications that offer spectacular functionality. These allow styling of complex components, media interactions, visual transitions, and deep customization of shadow DOM elements. While promising, many are still experimental and do not have full support across all browsers.

::highlight()

Description: Allows defining a set of custom styles for text highlighted via JavaScript using the Highlight API.

Usage: Used together with CSSHighlightRule and HighlightRegistry in JavaScript. Ideal for educational applications, code editors, or interactive interfaces.

Compatibility: Experimental support in Chrome and Edge. Not available in Firefox or Safari.

Example: Dynamically highlighting a word in a paragraph.

/* CSS */
::highlight(myHighlight) {
  background-color: yellow;
  color: black;
}

::part() and ::slotted()

Description: These pseudo-elements allow styling components inside the Shadow DOM, giving control over the internal parts of a Web Component.

Usage: ::part() accesses a part explicitly exposed via the part attribute, while ::slotted() styles content inserted through slots.

Compatibility: Good support in Chrome, Edge, and Safari. Firefox has partial support.

Example: Styling a slot in a Web Component.

/* CSS */
::slotted(h1) {
  color: royalblue;
  font-size: 2em;
}

::view-transition-*

Description: Part of the View Transitions API, these pseudo-elements allow animating visual transitions between states of a page or application. Ideal for SPAs, smooth navigation, and cinematic effects.

Usage: Used together with document.startViewTransition() in JavaScript and allow styling the transition between states.

Compatibility: Experimental support in Chrome and Edge. Not available in Firefox or Safari.

Example: Styling the transitioning image.

/* CSS */
::view-transition-image-pair() {
  animation: fade 0.5s ease-in-out;
}

::target-text

Description: Allows styling text that is the target of a URL fragment (e.g., #paragraph). Useful for automatically highlighting content accessed directly via a link.

Usage: Applied automatically when a #id fragment is accessed in the URL. Can be used for guides, documentation, or contextual navigation.

Compatibility: Experimental support in Chrome. Not available in Firefox or Safari.

Example: Automatically styling the targeted text.

/* CSS */
::target-text {
  background-color: lightyellow;
  outline: 2px dashed orange;
}

::scroll-marker & ::scroll-marker-group

Description: These pseudo-elements allow styling the indicators on the scroll bar, providing visual feedback about the content's position (e.g., markers for errors, comments, sections).

Usage: Used in combination with the ScrollTimeline API and can highlight key points in scrollable content.

Compatibility: Experimental support in Chrome. Not available in Firefox or Safari.

Example: Styling a marker on the scrollbar.

/* CSS */
::scroll-marker {
  background-color: red;
}
::scroll-marker-group {
  background-color: blue;
}

::picker-icon

Description: Allows styling the default icon in elements like <input type="date">, <input type="color">, etc. Provides control over the visual appearance of the native interface.

Usage: Applied to inputs that display a native picker. Can be used to customize the color, size, or shape of the icon.

Compatibility: Experimental support in Chromium. Not available in Firefox or Safari.

Example: Styling the calendar icon.

/* CSS */
input::picker-icon {
  filter: invert(1);
  opacity: 0.6;
}

CSS pseudo-elements provide an additional level of control over visual presentation, allowing precise styling of the internal parts of HTML elements. Whether fully supported or still experimental, they significantly extend design and interaction possibilities in modern web development.

🧠 Quiz – CSS Pseudo-elements