PHPnews.io

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

Written by Bram.us / 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:

link-to-text-fragment.png

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 pic.twitter.com/GkXfgDFjnT

— Bramus! (@bramus) January 31, 2021

This snippet below:

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

Will visually manifest itself like this:

style-text-to-scroll-fragments-2.png

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 »