CSS ::target-text for Text Highlighting

Ever needed to share a specific part of a webpage with someone? We often resort to screenshots or vague instructions like “search for this text” or “scroll down to the third paragraph.”

Another approach is to add anchor points with IDs <section id="section-1"> to enable direct navigation, but this requires modifying the HTML structure and only works for predefined sections. While these approaches work, they’re not ideal for sharing specific text content.

The ::target-text pseudo-element offers a native solution for text highlighting. When someone visits a URL containing a text fragment (like #:~:text=hello), browsers that support this feature will automatically find and highlight that text. Let’s look at how this works and where it might be useful.

The ::target-text pseudo-element simplifies this entire process. When a user visits a URL with a text fragment (like #:~:text=hello), the browser automatically matches and scrolls to that text. ::target-text lets us style this highlighted section without writing a single line of JavaScript.

The implementation is surprisingly straightforward. First, we define how highlighted text should appear:

Then, we can create links that highlight specific text when clicked:

Here’s a simple example. Click the link below to see the text fragment highlighting in action. The browser will scroll to the matching text and apply the yellow background color.

::target-text can be particularly helpful in several scenarios:

1. Documentation websites where users need to reference specific sections
2. Educational platforms where teachers want to highlight particular passages
3. Support pages where staff need to guide users to specific information
4. Blog posts or articles where readers want to share specific quotes. (via #:~:text= inside the URL)

Pro tip: On most browsers, you can also right-click on selected text and choose “Copy link to highlight” for the same functionality without any custom code.

The ::target-text pseudo-element brings native text highlighting to the web, making content sharing more precise and user-friendly. Whether through custom implementations or the browser’s built-in features, we can now share exact passages instead of vague directions - a small but significant step toward better web navigation.