About

this is just a simple stylesheet providing a class for hover effect

Preview

How to use

Just download the hover_underline.css file and either

• import it inside the html document:

 <link rel="stylesheet" href="hover_underline.css">

• or in a css stylesheet file that is already linked to your html document:

 @import url(hover_underline.css);

You just need to assign a HTML element the hover-underline class:

<h1 class="hover-underline">Lorem ipsum dolor sit amet consectetur</h1>

Settings

• There are a few settings that you can assign to elements as css variables:
  • --ahu-transition-interval (default: 350ms)
  • --ahu-thickness (default: 3px)
  • --ahu-color (default: white)

usage example:

<h1 class="hover-underline" style="--ahu-thickness: 5px; --ahu-thickness: 5px; --ahu-transition-interval: 0.5s; --ahu-color: red;">Lorem ipsum dolor sit amet consectetur</h1>