Discover the Benefits of Canva Pro for Free and Elevate Your Designs | Get it for Free

Animated Underline Link 

Let's Begin

Steps to Add Animated Underline Hover Effect in Blogger

Step 1: First of all Login to your Blogger Dashboard

Step-2: Click on Theme -> Click on Arrow Icon -> Click on Backup -> Download Theme.

Step-3: Now click on the blank area and press CTRL + F, now enter </body> tag or closing body tag in the search bar and press Enter.

Step-4: Copy the below provided CSS code.

<style>
a{display:inline-block;position:relative;color:#c44341;text-decoration:none}
a:after{content:'';position:absolute;width:100%;transform:scaleX(0);height:2px;bottom:0;left:0;background-color:#c44341;transform-origin:bottom right;transition:transform .25s ease-out}
a:hover:after{transform:scaleX(1);transform-origin:bottom left}
    </style>

Step-5: Paste the copied CSS code above </body> tag.

Step-6: Now click on save button.

Step-7: You have successfully added animated underline link hover effect in your blogger website.

Warning!
If you get any error while saving the code, then restore your backup code again and repeat the same steps above provided.!

Here you can also add your class post body section to target the links inside your website posts and exclude other links in your website, for that you need to click on inspect element in your chrome or press F12 to open developers section and search for your post body class only and add it to the above CSS code.

You can also add the given CSS code above the ]]></b:skin> tag or </style> tag by removing the <style> tag with the code.

Go to Link

Go to Link