::target-text CSS Pseudo Element

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The ::target-text pseudo-element in CSS is used to style the portion of text within an element that has been targeted by a fragment identifier in the URL. In simpler terms, when a user navigates to a URL with a hash (e.g., https://example.com/page#section1), the element with the matching id becomes the target, and ::target-text allows you to apply styles specifically to the text content of that targeted element. This pseudo-element provides a precise way to emphasize text that the user is navigating to, rather than styling the entire element.

Unlike the :target pseudo-class, which styles the entire element being targeted, ::target-text focuses solely on the textual content. This distinction is particularly useful when you want subtle highlighting or animation effects on the text itself without altering the element's box model, borders, or background. It can also be combined with other pseudo-elements like ::first-letter or ::first-line for more advanced typographic effects.

You can style ::target-text using standard text-related CSS properties such as color, font-weight, text-decoration, and background-color. This enables dynamic highlighting or visual feedback when a user jumps to a specific section via an anchor link.

Example:

<p id="intro">Welcome to our website! Click <a href="#intro">here</a> to highlight this text.</p>

p:target::target-text {
    background-color: yellow;
    font-weight: bold;
    color: darkblue;
}

In this example, when the user clicks the link to #intro, only the text inside the paragraph with id="intro" will be highlighted and styled, leaving the rest of the paragraph’s container unaffected.

Another useful scenario is animating the appearance of the target text for a smoother reading experience, for instance using transitions on color or background-color. This makes ::target-text a powerful tool for enhancing navigation and readability on content-heavy pages.

Syntax

::target-text {
  /* ... */
}

Example

HTML

<body>



  <h1>CSS ::target-text Demo</h1>

  

  <p>

    To see this in action, you must click the link below. 

    It will reload the page and highlight the specific word "highlighted" 

    using the styles defined in the CSS.

  </p>



  <a href="#:~:text=highlighted">Activate Text Highlight</a>



  <div style="margin-top: 500px;">

    <p>

      This is a normal paragraph, but one specific word in here 

      is going to be <b>highlighted</b> by the browser.

    </p>

  </div>



</body>

CSS

/* This styles the text when it is linked via a text fragment */

::target-text {

  background-color: #ffde03;

  color: #000;

  font-weight: bold;

  text-decoration: underline wavy red;

}



/* Optional: Adding a transition isn't supported for the pseudo-element itself, 

   but it's good to keep the rest of your UI clean. */

body {

  font-family: system-ui, sans-serif;

  line-height: 1.6;

  padding: 2rem;

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS ::target-text pseudo element. Hover over a browser icon to see the version that first introduced support for this CSS psuedo element.