Style the target text from text-fragment links using the ::target-text pseudo-element

Written by / Original link on Feb. 15, 2021

One of my favorite features that shipped with Chrome 80 — apart from Optional Chaining — is the ability to link to text-fragments. By default Chrome will highlight those in yellow:


As tweeted before, coming to Chromium 89 is the ability to style those text-fragments using the ::target-text pseudo-element.

🎉 Coming to @googlechrome 89 is the ability to style the target text from text-fragment links using the ::target-text pseudo-element.#CSS

— Bramus! (@bramus) January 31, 2021

This snippet below:

/* Style scroll-to-text fragments */
::target-text {
    background: #00cdff;

Will visually manifest itself like this:


Cool! 🙂


Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would surely put a smile on my face. Thanks!

☕️ Buy me a Coffee (€3)

To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.

💡 To easily create text-fragment links there’s this Chromium Plugin you can use.

bram bram tutorialzine bram

« Remotion – Create videos programmatically in React - How Dangerous is Your Nette Template Assign »