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

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, which is part of the CSS Pseudo-Elements Level 4 Specification.

🎉 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:

~

Note that the ::target-text pseudo-element can only be styled by a limited set of properties that do not affect layout. Only following properties apply:

• color
• background-color
• text-decoration and its associated properties
• text-shadow
• stroke-color, fill-color, and stroke-width

~