Highlighting Text in Links with Text Fragments

I’ve used URL text fragments in a few posts now and often use it outside of this blog to point someone to a particular piece of text on a page. They’re a really useful feature that allows you to create a URL that links not just to a page or an anchor on that page, but specifically to a bit of text that you’d like to call out to your audience.

The URL Fragment Text Directive is a W3C Draft, but has been around in at least some major browsers since 2020 and now has good support across Chrome, Edge, Safari, and Firefox as of this September. Firefox was the last straggler, with Safari joining the party in 2022.

Building URLs

Despite using Safari as my daily driver for various privacy, security, performance, and platform integration reasons, I still keep Chrome around for the occasional Google Meet call and for generating these links: highlight some text and right clip to copy a link to the highlight. Safari doesn’t have that feature yet unfortunately.

You can technically generate your own text fragment. They go in the URL where the fragment usually would and take the form #:~:text= followed by the URL-encoded text, so you might link to that sentence with #:~:text=followed%20by%20the%20URL-encoded%20text. You can also add a , between start and end text and create a highlight for everything between them, inclusive. This whole paragraph could be highlighted with #:~:text=You%20can%20technically,word%20banana as long as I end this sentence with the word banana.

For even more specificity, you can add prefixes and suffixes with #:~:text=specificity%2C-,you%20can%20add%20prefixes%20and%20suffixes,-with. The full syntax is #:~:text=[prefix-,]start[,end][,-suffix] and I think you can see why I use Chrome’s context menu instead of hand-crafting these. I got all of those examples wrong and had to tweak them multiple times. Pro tip: commas ~and hyphens~ will need to be URL-encoded as well even though they normally wouldn’t, since they’re part of the text fragment syntax. Update: Re-re-done by copying from the Chrome context menu.

The Chrome team have a great post on text fragments that goes into other neat things you can do with them, like including multiple text fragments, polyfilling the behavior, and getting the text fragment with JavaScript for analytics purposes. Of course MDN remains an excellent resource for anything web-related and also have a page on text fragments.

Styling highlights

The style for the highlights defaults to something similar to how <mark> is styled. If you’d like to change how they look on your site, the selector ::target-text is the one you’re looking for. As part of writing this post, I’ve also added styles for text fragment highlights as the default really conflicted with my link styles, making them nearly invisible.

::target-text isn’t supported as of this writing in a released Safari version, but is in the Beta for Safari 18.2.

::target-text {
  background-color: oklch(from var(--color-blue) l c h / 0.35);
}

If you’re curious about that color syntax, I’m hoping to publish a post on it soon (edit: I did it! Build Colors from Colors with CSS Relative Color Syntax) but for now you can search “CSS Relative Colors”. If you’ve not heard the good news of OKLCH, Evil Martians have you covered but it’s basically the best color space for describing how humans perceive colors. In the above example, I’m taking an existing blue color and giving it 25% opacity.