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. ? Coming to @googlechrome 89 is […]


This content originally appeared on Bram.us and was authored by Bramus!

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.

This snippet below:

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

Will visually manifest itself like this:

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.


This content originally appeared on Bram.us and was authored by Bramus!


Print Share Comment Cite Upload Translate Updates
APA

Bramus! | Sciencx (2021-02-15T22:15:03+00:00) Style the target text from text-fragment links using the ::target-text pseudo-element. Retrieved from https://www.scien.cx/2021/02/15/style-the-target-text-from-text-fragment-links-using-the-target-text-pseudo-element/

MLA
" » Style the target text from text-fragment links using the ::target-text pseudo-element." Bramus! | Sciencx - Monday February 15, 2021, https://www.scien.cx/2021/02/15/style-the-target-text-from-text-fragment-links-using-the-target-text-pseudo-element/
HARVARD
Bramus! | Sciencx Monday February 15, 2021 » Style the target text from text-fragment links using the ::target-text pseudo-element., viewed ,<https://www.scien.cx/2021/02/15/style-the-target-text-from-text-fragment-links-using-the-target-text-pseudo-element/>
VANCOUVER
Bramus! | Sciencx - » Style the target text from text-fragment links using the ::target-text pseudo-element. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/02/15/style-the-target-text-from-text-fragment-links-using-the-target-text-pseudo-element/
CHICAGO
" » Style the target text from text-fragment links using the ::target-text pseudo-element." Bramus! | Sciencx - Accessed . https://www.scien.cx/2021/02/15/style-the-target-text-from-text-fragment-links-using-the-target-text-pseudo-element/
IEEE
" » Style the target text from text-fragment links using the ::target-text pseudo-element." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2021/02/15/style-the-target-text-from-text-fragment-links-using-the-target-text-pseudo-element/. [Accessed: ]
rf:citation
» Style the target text from text-fragment links using the ::target-text pseudo-element | Bramus! | Sciencx | https://www.scien.cx/2021/02/15/style-the-target-text-from-text-fragment-links-using-the-target-text-pseudo-element/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts