- The Basic
- The Continuous
- The Double
- The Two Steps
- The Unexpected
- The Rounded
- The Fading
- The Infinite
- The All Sides
- The Thick
- The Sliding
- The Fancy
- The Inverted
- The 3D
currentColorwill use the color defined inside
- I am using CSS variables to make the code shorter.
var(--d, 0)means that the default value is
0then I change it on hover.
- The syntax
0 100% /var(--d, 0) 3pxmeans
background-position / background-size. We adjust the
3pxto control the height/thickness of the line.
Keep the hover for too long here.
The below requires us to know the width of the element so it’s more suitable for monospace fonts where we can use the
(2) and (5) use some hardcoded values that need to be adjusted based on the element width
The below doesn’t work on Firefox due to a known bug
Warning: the below uses some advanced CSS but I considered CSS variables to make it easy to control