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.

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

~

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.

About the author

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.