How to add beautiful Link Underline Animation with simple CSS? (4 different ways)

Have you ever wondered how to add beautiful Link Underline Animation with simple CSS?

Do you have any of below questions?

How to Animating Link Underlines
How to Animated Multiline Link Underlines with CSS
4 CSS Snippets for Creating Stunning Animated Underline
How to Animating Links?

Demo – 1. From inside to out

Check this out.

Here is a code:

<p class="crunchify-underline-demo">
    <a href="" class="crunchify-link-moveout">Hello from Crunchify.com</a>
</p>

Just add below to your WordPress theme’s css file:

/* ------------ Demo-1. Beautify Link Underline: middle to outwards -------------- */

a.crunchify-link-moveout {
        position: relative;
}

a.crunchify-link-moveout:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 3px;
        bottom: -5px;
        left: 0;
        background-color: #fff;
        visibility: hidden;
        transform: scaleX(0);
        transition: all 0.4s ease-in-out;
}

a.crunchify-link-moveout:hover:before {
        visibility: visible;
        transform: scaleX(1);
}

Demo – 2. From Left to Right

Check this out.

Hello from Crunchify.com

Here is a code:

<p class="crunchify-underline-demo">
        <a href="" class="crunchify-link-toright">Hello from Crunchify.com</a>
</p>

Add below code to your theme’s CSS file.

/* ------------ Demo-2. Beautify Link Underline: From Left to Right -------------- */

a.crunchify-link-toright {
        position: relative;
}

a.crunchify-link-toright:before {
        content: "";
        position: absolute;
        width: 0;
        height: 3px;
        bottom: -5px;
        left: 0;
        background-color: #fff;
        visibility: hidden;
        transition: all 0.4s ease-in-out;
}

a.crunchify-link-toright:hover:before {
        visibility: visible;
        width: 100%;
}

Demo – 3. Left to Right

Hello from Crunchify.com

Here is a code:

<p class="crunchify-underline-demo">
        <a href="" class="crunchify-link-toleft">Hello from Crunchify.com</a>
</p>

Add below code to your theme’s CSS file.

/* ------------ Demo-3. Beautify Link Underline: From Right to Left -------------- */

a.crunchify-link-toleft {
        position: relative;
}

a.crunchify-link-toleft:before {
        content: "";
        position: absolute;
        width: 0;
        height: 3px;
        bottom: -5px;
        right: 0;
        background-color: #fff;
        visibility: hidden;
        transition: all 0.4s ease-in-out;
}

a.crunchify-link-toleft:hover:before {
        visibility: visible;
        width: 100%;
}

Demo – 4. From Bottom Top

Hello from Crunchify.com

Here is a code:

<p class="crunchify-underline-demo">
        <a href="" class="crunchify-link-bottomtop">Hello from Crunchify.com</a>
</p>

Add below code to your theme’s CSS file.

/* ------------ Demo-4. Beautify Link Underline: From Bottom to Top -------------- */

a.crunchify-link-bottomtop {
        position: relative;
}

a.crunchify-link-bottomtop:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 0;
        bottom: -5px;
        left: 0;
        background-color: #fff;
        visibility: hidden;
        transition: all 0.4s ease-in-out;
}

a.crunchify-link-bottomtop:hover:before {
        visibility: visible;
        height: 3px;
}

I hope you find this code helpful and let us know if you face any issue running this code.

The post How to add beautiful Link Underline Animation with simple CSS? (4 different ways) appeared first on Crunchify.