Welcome back to another tutorial focused on the Extra theme. In this tutorial, you’ll learn how to add link animation in a post. Some people like to have all their links in their projects with text-decoration: underline.

Some people rather not having any underline at all – just a different color to highlight.

Preview

If you are like me and want a neat/fancy link animation in a post that when you hover over it starts a micro animation… You’re in the correct tutorial.

First, one quick design tip:

Never use underline in your text if it’s not meant to be a link. It confuses the user. Furthermore, it doesn’t add to the page design.

One more thing!

I won’t show you in this tutorial how to change all website links because a lot of Modules use links that aren’t good with this underline animation. Let’s stick with only the links inside your posts, ok?

I learned this nice link effect browsing the internet for design ideas for link hovering effects.

Then, I found this post from the website bradsknutson.com – and I really liked the example Underline – Slide In, Slide Off. You should visit the link and check out all the links animation available there.

This is right now the link animation that I use in YouDivi blog. Hope you liked it!

Without further ado, let’s start!

How to have a link animation in a post

When you’re blogging there are 2 ways to write the blog posts using WordPress with the Extra theme:

  • Using the Divi builder Modules;
  • Using plain text, without triggering the Divi builder.

Next, I’ll show both CSS to make it look exactly like the demo in both situations.

Using the Divi builder Modules

Add the following CSS code inside Extra > Theme Options > Custom CSS.

/* -- Links -- */
.et_pb_blurb_container p a, .et_pb_pagebuilder_layout .et_pb_text a {
display: inline-block;
position: relative;
}
.et_pb_blurb_container p a:before, .et_pb_pagebuilder_layout .et_pb_text a:before {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 100%;
transition: width 0s ease;
}
.et_pb_blurb_container p a:after, .et_pb_pagebuilder_layout .et_pb_text a:after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 2px;
width: 100%;
background: #5db8ff;
transition: width .3s ease;
}
.et_pb_blurb_container p a:after:before, .et_pb_pagebuilder_layout .et_pb_text a:hover:before {
width: 0%;
background: #5db8ff;
transition: width .3s ease;
}
.et_pb_blurb_container p a:hover:after, .et_pb_pagebuilder_layout .et_pb_text a:hover:after {
width: 0%;
background: transparent;
transition: width 0s ease;
}

Remember to adjust the height and color properties to better suit your project design needs.

If you are like me and rather writing your blog posts without Divi builder, check the next CSS code.

Using plain text, without triggering the Divi builder.

Add the following CSS code inside Extra > Theme Options > Custom CSS.

/* -- Links -- */
div.post-content.entry-content a {
display: inline-block;
position: relative;
}
div.post-content.entry-content a:before {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 100%;
transition: width 0s ease;
}
div.post-content.entry-content a:after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 2px;
width: 100%;
background: #5db8ff;
transition: width .3s ease;
}
div.post-content.entry-content a:hover:before {
width: 0%;
background: #5db8ff;
transition: width .3s ease;
}
div.post-content.entry-content a:hover:after {
width: 0%;
background: transparent;
transition: width 0s ease;
}

Conclusion

How did you like this tutorial about adding link animation in a post?

If you liked it, there are plenty more styles for links to learn how to use. Leave a comment if you want more tutorials like this. Your feedback is always important to me.

See ya!