What is the CSS ::target-text Pseudo-Element?

The ::target-text pseudo-element in CSS allows developers to style text directly linked and scrolled to via URL text fragments. When a user navigates to a webpage using a scroll-to-text fragment, the browser automatically scrolls to the specified passage and applies a default highlight. By using ::target-text, you can customize the appearance of this targeted text to match your website's design system, ensuring branded visual consistency while enhancing accessibility and readability.

Understanding Scroll-to-Text Fragments

Scroll-to-text fragmentation—often called Text Fragments—is a web feature that enables deep linking directly to specific words or phrases on a webpage rather than relying on predefined anchor IDs (#section-id).

These URLs contain a specific hash syntax:

https://example.com/page.html#:~:text=target%20text

When a user visits a link containing #:~:text=, the browser parses the parameter, locates the matching text, scrolls it into the viewport, and applies a highlight. By default, browsers typically highlight this text with a bright yellow background.

What Does ::target-text Do?

The ::target-text pseudo-element provides direct control over the appearance of the text targeted by these text fragments. Without custom CSS, users see browser-specific default highlights, which can clash with your site's color palette or create poor contrast with dark-mode themes.

Using ::target-text, you can override these defaults:

::target-text {
  background-color: #2b6cb0;
  color: #ffffff;
}

Supported Properties

For performance and security reasons, ::target-text does not support every CSS property. Similar to other highlight pseudo-elements like ::selection and ::highlight(), it only accepts properties that affect text and background rendering:

• Color: color
• Backgrounds: background-color, background-image
• Text Decoration: text-decoration-color, text-decoration-line, text-decoration-style, text-decoration-thickness
• Text Shadow: text-shadow
• Stroke & Fill: stroke, fill (for SVG text)

Properties that alter layout or typography dimensions—such as font-size, margin, padding, or display—are completely ignored.

Practical Implementation Example

Here is a practical example showing how to style text targets for both light and dark themes:

/* Default/Light mode styling */
::target-text {
  background-color: #e0f2fe;
  color: #0369a1;
  text-decoration: underline;
  text-decoration-color: #0284c7;
}

/* Dark mode styling */
@media (prefers-color-scheme: dark) {
  ::target-text {
    background-color: #0f4c81;
    color: #f0f9ff;
    text-decoration-color: #38bdf8;
  }
}

Accessibility Considerations

When overriding ::target-text, contrast is critical. Ensure that the combination of color and background-color passes WCAG AA contrast requirements (at least 4.5:1 for normal text). If the contrast is too low, visually impaired users may find the targeted text unreadable once highlighted.

Browser Support

The ::target-text pseudo-element is part of the CSS Pseudo-Elements Level 4 specification and is supported in modern Chromium-based browsers (such as Chrome, Edge, and Opera) and Safari. Browsers that do not support ::target-text simply fall back to their default highlight behavior or ignore the rule entirely, making it safe to use as a progressive enhancement.