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 propertiestext-shadow
stroke-color
,fill-color
, andstroke-width
~
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!
To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.