How to Add Animated Underline Hover Effect in WordPress

Hi to all in this article, I am going to tell you all about how to add animated underline hover effect in your WordPress website easily in just few minutes.

By adding this animated underline hover effect code, you can attract the visitors attention and they will read your post till end and your audience retention will increase and your website bounce rate will also decreases.

And also your website interface will be improved as a professional website, and will attract new visitors to your website.

So, if you want to increase your user attention then you need to add this effect in your WordPress website.

Read the below provided steps carefully and follow them and don't miss any steps because it may effect your your complete website theme code, so read the steps carefully and completely, if you get any doubts then let me know through contact us page.

How to Add Animated Underline Hover Effect in WordPress

Steps to Add Underline Hover Effect in WordPress

Step-1: First of all you need to login to your WordPress website dashboard by using your login credentials.

Step-2: Now in your dashboard, click on Appearance.

Step-3: Here in appearance choose Customize.

Step-4: Now you need to search for Additional CSS section and click on it.

Strep-5: Now copy the below provided code.

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}
Copy

Step-6: Paste the copied CSS code in the Additional CSS section.

Step-7: After adding the CSS code, click on publish button.

Step-8: Now you have added animated underline hover effect in your WordPress website easily in just few minutes.

Note:

If you need to show this underline hover effect in your posts only then, you need to find the class of the post section and to find this class you can use inspect element in your chrome or press F12 and find your post section class id.

After finding the class, you need to add that class before the two anchor tag in the above CSS code, for example .body-post, .post-body, .entry-content, .post-section etc.

Conclusion

I hope that you have understood about adding the animated underline hover effect in your WordPress website easily in just few minutes.