A text fragment is an addition to a web address, #:~:text= followed by words from the page, that makes the browser scroll to those words and highlight them. Chrome's Copy link to highlight menu item writes one for you, and you can build them by hand with optional start, end, prefix and suffix parts.
| Browser | Supported from |
|---|---|
| Chrome | 81 |
| Edge | 83 |
| Safari | 16.1 |
| Firefox | 131 |
Updated
Sending a customer to the exact line of your returns policy, or pointing a client at one paragraph of a long proposal, beats saying "scroll down a bit". Text fragment links do that with nothing more than a longer URL; the page owner does not have to add anchors. Paste a page address and a passage into the builder to make one.
Your link: https://example.com/returns#:~:text=Refunds%20are%20issued%20within
| Fragment | Highlights |
|---|---|
| #:~:text=opening%20hours | The first match of "opening hours" |
| #:~:text=Delivery%20takes,business%20days | From "Delivery takes" through "business days" |
| #:~:text=Saturday-,closed | "closed" only where it follows "Saturday" |
| #:~:text=price&text=deposit | The first "price" and the first "deposit" |
Browsers pick a default highlight colour. The ::target-text pseudo-element lets you match it to your brand.
Keep strong contrast between the text and the highlight colour.
::target-text {
background-color: #ffe08a;
color: #1f1f1f;
}document.fragmentDirective is an object in supporting browsers and undefined elsewhere.
if ("fragmentDirective" in document) {
console.log("This browser supports text fragments");
}The full form is #:~:text=[prefix-,]textStart[,textEnd][,-suffix]. Only textStart is required. With textEnd added, the browser highlights everything from the start words to the end words.
The prefix ends with a dash and the suffix begins with one. They are not highlighted; they only tell the browser which copy of a repeated phrase you mean.
Every part must be percent-encoded, which turns spaces into %20. MDN adds that the dash itself must be encoded as %2D, because a bare dash would be read as a prefix or suffix marker.
Commas and ampersands separate parts and fragments, so encoding them too, as %2C and %26, keeps them from being misread. The builder on this page does all of this for you.
Select the text on the page, right-click it and choose Copy link to highlight. Chrome Help notes that if you cannot select this option, the feature may not work for that content.
Yes, in current versions. caniuse lists support from Safari 16.1 and Firefox 131, along with Chrome 81 and Edge 83. Older browsers simply open the page at the top.
The words may not appear exactly as written, one part may span two paragraphs, or a dash in the text was not percent-encoded. Text inside an iframe is never searched, according to MDN.
No. MDN explains that browsers strip the :~: directive from the URL during loading, so page scripts cannot read it. You can detect support with document.fragmentDirective.
Chromium-based browsers honour a Document-Policy: force-load-at-top response header that opts a page out of text fragment scrolling, according to MDN.
Related: HTML links guide, URL encoder and decoder, HTML mailto links, WhatsApp link generator.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.