CSS ::target-text Pseudo-Element

CSS ::target-text Pseudo-Element

The ::target-text pseudo-element styles text that a browser identifies through a URL text fragment. It allows developers to customize the appearance of highlighted text when visitors follow a link that points directly to a word or phrase within a webpage.

Syntax

selector::target-text {
  property: value;
}

The selector identifies the element containing text that may be highlighted by a URL text fragment.

The ::target-text pseudo-element represents the matching text identified by the browser.

For example:

::target-text {
  color: #222;
  background-color: #ffeb99;
}

This rule displays targeted text with a light yellow background and dark text.

To target text within paragraphs:

p::target-text {
  color: #fff;
  background-color: #0066cc;
}

This applies the custom highlight to targeted text inside paragraphs.

The ::target-text pseudo-element does not accept arguments or require parentheses.

It uses the standard double-colon syntax for CSS pseudo-elements.

How It Works

Browsers that support text fragments can navigate directly to matching text within a webpage.

Unlike traditional fragment links, text fragments do not require the target text to have an HTML id attribute.

Instead, the browser searches the document for text matching the instructions in the URL.

The process involves five steps:

1. A visitor follows a URL containing a text fragment directive.
2. The browser loads or navigates to the requested webpage.
3. The browser searches the document for the specified text.
4. If a match is found, the browser may scroll to it and highlight it.
5. The ::target-text pseudo-element applies custom styling to the highlighted text in supporting browsers.

For example, consider the following paragraph:

<p>CSS controls the visual presentation of HTML documents.</p>

A URL can request that the browser locate the phrase visual presentation:

https://example.com/tutorial.html#:~:text=visual%20presentation

If the browser finds the phrase and supports text fragment highlighting, it can scroll to and highlight those words.

The following CSS controls the appearance of that highlight:

::target-text {
  background-color: #ffeb99;
  color: #222;
}

CSS does not perform the text search or control which text matches the URL.

The browser handles matching, navigation, and highlighting.

Understanding Text Fragments

A text fragment is a special URL instruction that identifies text within a webpage.

Text fragments use the #:~:text= syntax.

For example:

https://example.com/page.html#:~:text=CSS

This URL requests that the browser locate the text CSS within the page.

When a match is found, the browser can highlight the text without requiring an element ID.

Text fragments are useful for linking directly to relevant passages in documentation, tutorials, articles, and other text-based pages.

For example, a visitor reading a CSS reference page could share a link that highlights a specific explanation rather than only linking to the top of a section.

The browser determines which matching occurrence is selected according to text fragment processing rules.

For reliable links, choose distinctive phrases that are unlikely to appear multiple times.

Text fragments can also include additional context to help identify the intended passage.

Text Fragment URL Syntax

Text fragment directives can identify a word, phrase, text range, or text with additional context.

For example:

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

The sequence %20 represents an encoded space in the URL.

A text range can identify a longer passage:

https://example.com/page.html#:~:text=CSS%20controls,webpage%20layout

This requests a range beginning with CSS controls and ending with webpage layout.

Text fragments can also use prefix and suffix context to distinguish similar passages.

These URL features are separate from the CSS ::prefix and ::suffix sub-pseudo-elements.

Note: When writing a URL inside an HTML attribute, encode special characters as needed and use & for any ampersands.

Styling Targeted Text

The ::target-text pseudo-element supports properties used for styling highlighted text.

The most common properties are color and background-color.

For example:

::target-text {
  color: #222;
  background-color: #ffeb99;
}

This creates a light yellow highlight with dark text.

A darker highlight can also be used:

::target-text {
  color: #fff;
  background-color: #0066cc;
}

This displays targeted text in white against a blue background.

Text decorations can provide an additional visual indicator:

::target-text {
  color: #222;
  background-color: #ffeb99;
  text-decoration-line: underline;
  text-decoration-color: #0066cc;
  text-decoration-thickness: 2px;
}

This adds a blue underline to the targeted text.

The highlight does not change the original text or insert additional HTML elements.

Targeting Specific Elements

The ::target-text pseudo-element can be combined with ordinary CSS selectors.

For example:

article::target-text {
  background-color: #ffeb99;
  color: #222;
}

This targets text fragments within an article.

A class selector can target a particular area:

.documentation::target-text {
  background-color: #cce5ff;
  color: #222;
}

This applies custom highlighting to targeted text inside elements with the documentation class.

Different areas can have different styles:

h2::target-text {
  background-color: #0066cc;
  color: #fff;
}
p::target-text {
  background-color: #ffeb99;
  color: #222;
}

Targeted heading text uses a blue background, while targeted paragraph text uses a light yellow background.

These selectors do not change which text the URL identifies.

They only affect the appearance of matching text in the selected elements.

Example

The following example demonstrates text fragment highlighting using a paragraph and a link containing a text fragment directive.

HTML:

<div class="target-text-demo">
  <p>CSS Grid provides a two-dimensional layout system for webpages.</p>
  <p><a href="#:~:text=two-dimensional%20layout%20system">Highlight the phrase</a></p>
</div>

CSS:

.target-text-demo::target-text {
  color: #222;
  background-color: #ffeb99;
  text-decoration-line: underline;
  text-decoration-color: #0066cc;
}

Try it: Click the Highlight the phrase link in the Browser Result.

In browsers that support same-document text fragment navigation, the browser may highlight the phrase two-dimensional layout system.

If the highlight does not appear, try opening the page with a complete URL containing the text fragment directive.

For example, append the following fragment to the page URL:

#:~:text=two-dimensional%20layout%20system

When the browser locates the phrase and supports ::target-text, the targeted words receive the custom highlight styling.

The browser may also scroll to the matching text.

Note: Text fragment navigation is subject to browser security restrictions. Clicking a same-document fragment link does not guarantee that highlighting will occur. A link opened through a normal page navigation is generally a more reliable test.

:target vs. ::target-text

The :target pseudo-class and ::target-text pseudo-element both relate to URL fragments, but they identify different targets.

For example, the :target pseudo-class can style an element with an ID:

<h2 id="introduction">Introduction</h2>

#introduction:target {
  background-color: #ffeb99;
}

The URL fragment #introduction identifies the heading element.

By comparison:

::target-text {
  background-color: #ffeb99;
}

This styles text matched by a text fragment directive, without requiring an element ID.

::selection vs. ::target-text

The ::selection and ::target-text pseudo-elements both style highlighted text, but they respond to different actions.

For example:

::selection {
  color: #fff;
  background-color: #0066cc;
}
::target-text {
  color: #222;
  background-color: #ffeb99;
}

Selected text appears white on blue.

Text identified by a URL text fragment appears dark on light yellow.

Both pseudo-elements can be used on the same webpage.

Supported CSS Properties

The ::target-text pseudo-element supports a limited set of CSS properties for highlighting text.

For example:

::target-text {
  color: #222;
  background-color: #ffeb99;
  text-decoration-line: underline;
  text-decoration-color: #0066cc;
  text-decoration-thickness: 2px;
}

Properties that change box layout, such as display, width, padding, and margin, cannot be used to change the layout of the highlighted text.

Some styling details may vary between browser implementations.

Highlight Inheritance

The ::target-text pseudo-element follows the special CSS highlight inheritance model.

Highlight pseudo-elements can inherit applicable properties from both their originating elements and corresponding highlight pseudo-elements on ancestor elements.

For example:

article::target-text {
  color: #222;
  background-color: #ffeb99;
}
article p::target-text {
  background-color: #cce5ff;
}

Targeted text within paragraphs uses the light blue background specified by the paragraph rule.

Other targeted text within the article can use the light yellow background.

The paragraph highlight can inherit applicable properties, such as text color, from the ancestor highlight.

When combining highlight rules, ensure that inherited text colors remain readable against the specified backgrounds.

This behavior differs from ordinary CSS inheritance for pseudo-elements such as ::before and ::after.

Limitations

The ::target-text pseudo-element has several limitations.

• It only styles text identified through supported text fragment navigation.
• It does not create text fragment links or perform text searches.
• It cannot control which text the browser selects as the matching passage.
• It supports only a restricted set of CSS properties.
• It cannot change the layout or dimensions of highlighted text.
• Text fragment navigation is subject to browser security and navigation restrictions.
• Some pages or documents may prevent the browser from finding a matching passage.
• Highlight appearance and duration can vary between browsers.
• Unsupported browsers may ignore the text fragment directive or use their default highlighting.

Text fragment links depend on the target text remaining available in the document.

If the wording changes, an existing text fragment link may no longer find the intended passage.

For stable navigation to major sections, traditional fragment links using element IDs are often more reliable.

Accessibility Considerations

Text fragment highlighting can help visitors locate relevant information within a long webpage.

Custom styling should make the targeted text easy to recognize without reducing readability.

Follow these accessibility practices:

• Maintain sufficient contrast between highlighted text and its background.
• Avoid using color alone when additional visual emphasis is useful.
• Use recognizable decorations such as underlines when appropriate.
• Ensure highlighted text remains readable at different zoom levels.
• Test highlighting in light and dark color schemes.
• Avoid excessive shadows or decorations that obscure letters.
• Preserve ordinary text selection and keyboard navigation.
• Provide meaningful link text describing the destination.

For example:

::target-text {
  color: #222;
  background-color: #ffeb99;
  text-decoration-line: underline;
  text-decoration-color: #0066cc;
}

This combines a contrasting background with an underline.

When text fragment navigation is unavailable, the webpage should remain readable and navigable through its normal structure.

Browser Support

The ::target-text pseudo-element is supported in modern Chromium-based browsers, including Chrome and Edge, and in Safari. Firefox support and behavior should be checked against current browser compatibility information.

Browser support for text fragment navigation and support for custom ::target-text styling are related but separate capabilities.

A browser may support one without providing the same behavior for the other.

For example:

@supports selector(::target-text) {
  ::target-text {
    color: #222;
    background-color: #ffeb99;
  }
}

This feature query applies the styling only when the browser recognizes the selector.

It does not guarantee that text fragment navigation will succeed or that a matching passage will be highlighted.

For current compatibility information, visit Can I Use? and search for ::target-text and Scroll to Text Fragment.

Also consult MDN for implementation details and browser compatibility updates.

Specifications

The ::target-text pseudo-element is defined in the CSS Pseudo-Elements Module Level 4 .

Text fragment navigation is described in the Text Fragments specification .

Related features include the :target pseudo-class, ::selection, ::search-text, and ::highlight().