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.
::target-text
Baseline 2024 newly available
Supported in Chrome: yes.
Supported in Edge: yes.
Supported in Firefox: yes.
Supported in Safari: yes.
Supported in Edge: yes.
Supported in Firefox: yes.
Supported in Safari: yes.
Since December 2024 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
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:
::target-text { background-color: yellow;}Then, we can create links that highlight specific text when clicked:
<a href="#:~:text=The%20quick%20brown%20fox%20jumps%20over%20the%20lazy%20dog" >Click to highlight "quick brown fox"</a>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.
The quick brown fox jumps over the lazy dog. This is a demonstration of text fragments. Try clicking the links above to see how text fragments work. The browser will automatically scroll to and highlight the specified text.
- Click on the 'Click to highlight quick brown fox' text above
- Notice the URL change. The browser will find and highlight the specified text
- Share these links with others to help them find specific text
::target-text can be particularly helpful in several scenarios:
- Documentation websites where users need to reference specific sections
- Educational platforms where teachers want to highlight particular passages
- Support pages where staff need to guide users to specific information
- 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.
