Add an Animated Link Hover Effect: If you want to make your website links stand out and look more modern, adding a smooth underline hover effect can be a great touch. It not only improves the visual appeal but also helps draw attention to clickable links.

In this tutorial, I’ll walk you through how to add an animated underline link hover effect using CSS whether you’re using Blogger or WordPress.

Why Add a Link Hover Effect?

A subtle animation when a user hovers over a link:

• Makes your site feel more interactive.
• Improves UX by showing users where they can click.
• Looks clean, professional, and modern.

The Hover Effect Code

Here’s the CSS we’ll be using for the animated underline effect:

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 0.25s ease-out;
}
a:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

This effect creates a colored line that animates in from the right when users hover over any link.

So, to Add the animation, watch the step by step video Added below.

📌 How to Add in Blogger

1. Log in to your Blogger Dashboard.
2. Go to Theme > Edit HTML.
3. Backup your theme first (always a good habit).
4. Paste the CSS above the </style> or ]]></b:skin> tag.

If you don’t have a <style> section, you can add this just above the </body> tag like this:

<style>
/* Paste the CSS code here */
</style>

Target Only Post Content Links

To apply the effect only to post content and avoid affecting menu links or sidebars, you can limit the scope. For example:

.post-body a {
  /* same CSS as above */
}

Common Blogger post content classes:

• .postBody
• .post-body
• .entry-content

Use Chrome’s Inspect Element tool to confirm the exact class used in your theme.

📝 How to Add in WordPress

1. Go to your WordPress Dashboard.
2. Navigate to Appearance > Customize > Additional CSS.
3. Paste the CSS code there.

Apply to Only Post Links

To apply it to post content only:

.entry-content a {
  /* your hover CSS */
}

Again, the class might vary depending on your theme (common ones include .post-content, .entry-content, .post-body). Use Inspect Element to check.

Also Read: Hide the Sidebar Only on Mobile in WordPress

FAQs – Animated Link Hover Effect

Final Thoughts

This small CSS trick can really enhance the look of your site without slowing it down. It works across all modern browsers and doesn’t require any plugins or JavaScript.

If you run into any issues, feel free to ask in the comments. And if you found this useful, don’t forget to follow me for more tips like this.