JSFiddle - React, Tailwind, and code Playground

by nitech

HTML

<script src="https://raw.github.com/nitech/hoverLineGrow/master/js/jquery.easing.js"></script>
<script src="https://raw.github.com/nitech/hoverLineGrow/master/js/hoverLineGrow.jquery.js"></script>
    <p>The purpose of this plugin is to:</p>
    <ul>
        <li>Satisfy Jørgens need for <a href="#">fancy underlines</a></li>
        <li>Satisfy Jørgens need for <a href="#">high end web</a></li>
        <li>Satisfy Jørgens need for <a href="#">artistic expression</a></li>
        <li>Satisfy Jørgens need for <a href="#">FWAs</a></li>
        <li>Satisfy Jørgens need for <a href="#">gull i gulltaggen</a></li>
        <li>(though it doesn't work with <a href="#">line<br>breaks</a>)</li>
    </ul>

CSS

a {
    text-decoration: none;
}

li {
    font-family: sans-serif;
    margin: 10px 0;
}

JavaScript

$(function() {

            // apply hoverLineGrow to all a tags
            $("a").hoverLineGrow({
                variant: "left-to-right",
                easeOver: "easeOutQuad",
                durationOver: 200,
                easeOut: "easeOutQuad",
                lineStyle: "1px solid",
                /* lineDistance: 1 */
                lineTop: 17
            });
        });