Text Hover Animate Underline

When hovering over a text link the links underline animates to provide a unique effect for your Webflow site. This CSS code snippet can be customized based on your specifications.

How to add it

1. Add the custom CSS to your site via an HTML embed or in the head section of your custom code.
2. Update transition, height, background and more

The code

                      <!-- Add via HTML embed or in head -->
<style>
.link::after {
      content: '';
      display: block;
      width: 0;
      height: 1px;
      margin-top:5px;
      background: #fff;
      transition: width .3s ease-out;
    }

    .link:hover::after {
        width: 100%;
    }
</style>