100 underline/overlay animations




The Basic

Few notes:

  • currentColor will use the color defined inside color.
  • I am using CSS variables to make the code shorter. var(--d, 0) means that the default value is 0 then I change it on hover.
  • The syntax 0 100% /var(--d, 0) 3px means background-position / background-size. We adjust the 3px to control the height/thickness of the line.



The Continuous



The Double



The Two Steps



The Unexpected



The Rounded



The Fading



The Infinite

Keep the hover for too long here.



The All Sides



The Thick



The Sliding

The below requires us to know the width of the element so it’s more suitable for monospace fonts where we can use the ch unit



The Fancy

(2) and (5) use some hardcoded values that need to be adjusted based on the element width



The Inverted

The below doesn’t work on Firefox due to a known bug



The 3D

Warning: the below uses some advanced CSS but I considered CSS variables to make it easy to control

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные поля помечены *