a:hover {
  font-family: Poppins, sans-serif;
  font-weight: 900;
}

and include Poppins instead of Creepster, It is a decent and interesting effect

Unfortunately, the code in @support not(...) {} block will have no effect in browsers that don’t support @support itself, but unconditional color: transparent will work nearly everywhere:(

Yep, for sure! That would totally be the best way to go if planning to use that example in production.

The version in this post does have a fallback for browsers that do not support the outline, but perhaps that conditional block could also include swapping the color to something more supported.

@keyframes shift 
    from {
        background-position: 0 bottom;
    }
    to {
        background-position: -20px bottom;
    }
}

a:hover {
    animation: shift .3s linear infinite;
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/squiggle.svg");
    background-repeat: repeat-x;
    background-size: 20%;
    border-bottom: 0;
    padding-bottom: .3em;
    text-decoration: none;
}

Heck yeah, this is great context! Thanks for sharing — and really nice work. :)

Most mobile browsers ignore hover effects or will activate them on touch, depending on the link behavior. I wouldn’t expect any of these experiments (or many other hover effects) to translate well into mobile.

That said, I do remember Samsung doing something several years ago that allowed hover effects when actually hovering a finger over an object.

Hey Oksana! Good question. I’m not sure I can think of a reason to add those attributes, but I suppose it can’t hurt! Although this example made me think about the use of the text tag to get content into a div as an alternate to the content property.

underline text across 2 lines
animate on hover
underline text of different sizes
have the ability to be any color

SVG would allow for dynamic sizing and color. Putting it as a background-image would allow for multiline squiggles. As for the css transition backed into the SVG, that was quite experimental. It worked pretty well and so that is the solution we ended up rolling with for that.