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.

Easily link to Text Fragments in Chrome with the “Copy Text Fragment URL” Plugin

One of the additions that shipped in Chrome 80 is the ability to link to Text Fragments. To easily create such links, I stumbled upon the “Copy Text Fragment URL” Plugin which adds an extra option to the context menu.

Handy! Makes me wonder why it’s not a default Google Chrome feature.

Chrome Web Store: Copy Text Fragment URL →

New in Chrome 80

Chrome 80 recently got released, with some nice new features.

To me the highlights are:

New in Chrome 80 →

💁‍♂️ Also on my list of highlights is Linking to text fragments using a special URL fragment in the form of :~:text=[prefix-,]textStart[,textEnd][,-suffix]. It’s a but clunky to work with as you can’t manually change the fragment in the URL and hit enter to make it work, you’ll need to actually follow it through a link.


Text Fragment linking in action