Up to date
Published
3 min read

Trevor I. Lasn

Staff Software Engineer, Engineering Manager

CSS ::target-text for Text Highlighting

A look at how browsers can highlight text fragments using CSS ::target-text, making text sharing and navigation more user-friendly

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.

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.

  1. Click on the 'Click to highlight quick brown fox' text above
  2. Notice the URL change. The browser will find and highlight the specified text
  3. Share these links with others to help them find specific text

::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.

img

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.


Found this article helpful? You might enjoy my free newsletter. I share dev tips and insights to help you grow your coding skills and advance your tech career.

Interested in supporting this blog in exchange for a shoutout? Get in touch.


Liked this post?

Check out these related articles that might be useful for you. They cover similar topics and provide additional insights.

Webdev
3 min read

scrollbar-width & scrollbar-gutter: CSS Properties for Layout Control

Prevent content shifts and refine scrollable UIs with scrollbar-width and scrollbar-gutter

Dec 19, 2024
Read article
Webdev
5 min read

WebAssembly (Wasm): When (and When Not) to Use It

Understanding the real use cases for WebAssembly beyond the performance hype

Nov 25, 2024
Read article
Webdev
3 min read

The HTML Native Search Element

The search HTML element is a container that represents the parts of the web page with search functionality

Dec 2, 2024
Read article
Webdev
12 min read

Frontend Security Checklist

Tips for Keeping All Frontend Applications Secure

Jul 30, 2024
Read article
Webdev
5 min read

SecretLint — A Linter for Preventing Committing Credentials

A guide to catching and preventing credential leaks in your code using Secretlint

Oct 22, 2024
Read article
Webdev
3 min read

CSS content-visibility: The Web Performance Boost You Might Be Missing

The content-visibility CSS property delays rendering an element, including layout and painting, until it is needed

Dec 5, 2024
Read article
Webdev
2 min read

link rel='modulepreload': Optimize JavaScript Module Loading

The rel='modulepreload' indicates that a module script should be fetched, parsed, and compiled preemptively, and stored for later execution

Dec 4, 2024
Read article
Webdev
4 min read

LH and RLH: The CSS Units That Make Vertical Spacing Easy

Exploring new CSS line-height units that eliminate guesswork from vertical rhythm

Dec 3, 2024
Read article
Webdev
4 min read

Understanding Vue's Suspense

How the Suspense component manages async dependencies and improves loading states in Vue apps

Aug 23, 2024
Read article

This article was originally published on https://www.trevorlasn.com/blog/css-target-text. It was written by a human and polished using grammar tools for clarity.