Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
::target-text lets you style words or passages that a browser has located through a URL text fragment, such as #:~:text=targeted%20sentence. Add a rule like ::target-text { background: #ffdf70; color: #111; } to customize the highlight. It is different from :target, which selects an element reached through an ordinary fragment such as #installation.
What ::target-text does
A text fragment is a URL directive that asks a supporting browser to find particular text on a page, scroll to it, and highlight the match. The ::target-text CSS pseudo-element represents that matched text so the destination page can customize its appearance. It does not search a page for words chosen in CSS; the URL and browser determine the text being targeted.
There are three related but distinct pieces:
- Element fragment:
#faqpoints to an element, commonly one withid="faq". - Text fragment:
#:~:text=some%20wordsasks the browser to locate words in the document. - Styling:
:targetstyles an element target;::target-textstyles text selected by a text fragment.
The distinction is defined in the CSS Pseudo-Elements Level 4 specification. If the URL targets an element by its fragment identifier, ::target-text matches nothing.
Recommended Free Tools
:target vs. ::target-text
| Feature | :target |
::target-text |
|---|---|---|
| Selector type | Pseudo-class | Pseudo-element |
| What it matches | An element targeted by a fragment identifier | Text matched through a text-fragment directive |
| Typical URL | /guide#installation |
/guide#:~:text=Install%20the%20package |
| Author-defined ID needed? | Usually, for a page section | No |
| Example rule | #installation:target { outline: 3px solid orange; } |
::target-text { background: gold; } |
Use :target when the destination is a known element, such as a heading with an ID. Use ::target-text when the URL points to a phrase rather than an element.
#1 Best Overall
Basic CSS and an accessible highlight
A minimal rule is:
::target-text {
background-color: #ffdf70;
color: #111;
}For a more noticeable treatment, add a non-color cue such as an underline:
::target-text {
background: #ffdf70;
color: #111;
text-decoration-line: underline;
text-decoration-thickness: 0.12em;
text-decoration-color: #684500;
}Check the actual foreground and background contrast in your design, including dark mode and forced-colors settings. Do not make color the only indication that text was targeted, and do not hide or alter the meaning of the passage. Highlight pseudo-elements have a special inheritance model, so avoid assuming every CSS property behaves exactly like it would on an ordinary element. See MDN’s ::target-text reference.
A simple color scheme can adapt to light and dark modes:
:root {
--target-text-background: #ffdf70;
--target-text-color: #111;
}
@media (prefers-color-scheme: dark) {
:root {
--target-text-background: #6b4f00;
--target-text-color: #fff;
}
}
::target-text {
background: var(--target-text-background);
color: var(--target-text-color);
}How text-fragment URLs work
The basic form targets a starting string:
https://example.com/page#:~:text=textStartTo identify a passage with a start and end, use a comma between them:
Rank #2
https://example.com/page#:~:text=textStart,textEndIf the phrase occurs more than once, a prefix or suffix can help disambiguate it:
https://example.com/page#:~:text=prefix-,textStart,-suffixFor example, a link might be:
https://example.com/article#:~:text=CSS%20Target%20TextText values must be percent-encoded. Matching is case-insensitive, and a URL can include multiple text fragments separated by &. The syntax, matching behavior, and limitations are documented in MDN’s text-fragment reference.
Hand-writing these URLs is easy to get wrong, especially when punctuation or repeated text is involved. When available, a browser’s “copy link to highlight” feature is usually more practical. For a repeated phrase, choose a longer passage or add helpful surrounding words, for example:
#:~:text=styling-,target%20text,-with%20CSSTry it on a page
Add this rule to a page:
::target-text {
background: #ffdf70;
color: #111;
text-decoration: underline;
}Include a paragraph such as:
<p>This paragraph contains a sentence that can be targeted by a text fragment.</p>Then open the page with a URL ending in #:~:text=contains%20a%20sentence. In a supporting browser, it should scroll to the matching text and apply your style. The browser processes the directive; a page author generally does not need JavaScript to parse it merely to style the highlight.
For a production check, test both a phrase that exists and one that does not. Also test at browser zoom, with keyboard use, in light and dark appearances, and with high-contrast or forced-colors settings. Verify that the text remains understandable if the highlight is absent.
Browser support and fallback
As of the compatibility check on August 18, 2026, MDN classifies ::target-text as Baseline 2024, available across current devices and browsers since December 2024. That does not include every older browser version. The compatibility snapshot lists support from Chrome 89, Edge 89, Firefox 131, Safari 18.2, Safari on iOS 18.2, and Opera 75; it lists Opera Mini support as unknown. Can I Use’s compatibility page reported approximately 92.79% global usage in its July 2026 usage-data snapshot. These figures are dated estimates, so check the current data against the browsers your audience must use.
If a browser does not recognize the CSS pseudo-element, the rule is ignored. The page remains readable, though the browser’s built-in highlight may be absent or use its own appearance. If the browser does not support text fragments, or cannot find the requested passage, the directive is ignored and navigation goes to the top of the document rather than to the phrase. Do not make the highlight essential to understanding instructions or content.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchUse text fragments as progressive enhancement, not as a replacement for meaningful headings, semantic links, or ordinary anchors. A JavaScript imitation is rarely a good default: it would need to handle URL parsing, matching across DOM boundaries, dynamic content, scrolling, and other edge cases.
When to use a text fragment instead of an ID
| Choose a text fragment when… | Choose an ID fragment when… |
|---|---|
| You need to link to a specific sentence or phrase. | You control the destination markup and can provide a stable section anchor. |
| The phrase has no suitable author-defined anchor. | The link is part of permanent navigation or documentation. |
| A browser, search result, or sharing workflow generated the deep link. | The wording may change, or older-browser compatibility is important. |
An ID-based anchor is usually more durable because it identifies structure rather than the exact wording. For example:
<h2 id="installation">Installation</h2>
<a href="/guide#installation">Installation</a>h2:target {
outline: 0.2rem solid #175cd3;
outline-offset: 0.25rem;
}A text fragment is useful when sentence-level precision matters, but it can stop matching if the passage is edited. The right choice depends on whether precision or long-term stability matters more.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshooting
The page opens at the top instead of the passage
Check that the browser supports text fragments, the phrase still appears in the rendered page, and the URL is correctly percent-encoded. The matching text may not meet the fragment’s matching constraints, or the navigation context may not process the directive. If the content is personalized, translated, changed by an experiment, or rendered differently after login, the requested words may not exist in that visitor’s page.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsThe wrong occurrence is highlighted
Make the start text more distinctive, or add a prefix and suffix to narrow the match. This is especially important when a short phrase appears several times.
The phrase crosses inline elements
Matching can span element boundaries, but the individual start, end, prefix, and suffix strings must each reside within the same block-level element. A passage split across separate blocks may therefore fail to match as expected.
The phrase is inside an iframe
Text fragments apply to the main frame: text is not searched inside an iframe, and iframe navigation does not invoke a text fragment. Do not use this mechanism to deep-link into embedded-frame text.
The site does not want text-fragment navigation
Chromium-based browsers support the force-load-at-top Document Policy value, which can be sent as Document-Policy: force-load-at-top. This is a browser/document-policy control, not a CSS opt-out and not a universal control across all browsers. See MDN’s text-fragment documentation.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Cross-origin links and standards status
For a cross-origin link that contains a text fragment, MDN recommends using rel="noopener"; use noopener with window.open() as well. This is a security recommendation for links, not a requirement for the ::target-text selector itself:
<a href="https://other.example/article#:~:text=important%20phrase" rel="noopener">
Read the highlighted passage
</a>::target-text is specified in CSS Pseudo-Elements Level 4, which remains a W3C Working Draft. Its broad presence in current major browsers makes it useful today, but it is not a replacement for semantic document structure or an assurance that every older browser will behave the same way.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
