11 thoughts on “New CSS for Styling Underlines on the Web”

  1. That's so awesome! Thanks Jen! `text-decoration-thickness` even works with `transition`, so we can make it gradually get larger or smaller!

  2. This is very cool, thanks for sharing. I've always used this…
    p a:not(.button) {
    box-shadow: 0px -4px 0px #00a2ff inset;
    transition: all 0.6s ease 0s;
    p a:not(.button):hover {
    box-shadow: 0px -8px 0px #00a2ff inset;

  3. Is there any reason for the “-thickness” suffix? I mean, given that other thickness properties are generally written with “-width” (e.g. “stroke-width”, “border-width”, etc.)

  4. Seems unexpected to me to increase the size of the skip-ink gap just because the thickness of the underline is thicker.

  5. Monumentally cool.

    I'm going to change all the links on my writing site to wavy red, and watch all my writer friends freak out about the 'misspellings'

Leave a Reply

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