Adding links to the blog posts redirects users to another site or document. To make the users interested in the links you’ve added, you need to make the links look different or stand out from the surrounding text. One way to make it happen is to add a hover effect. This article will show you how to add a hover effect to the links on your blog posts in Elementor. With Elementor, you can easily do that.
How to Add Hover Effect to the Links on Blog Posts in Elementor
Before we start the tutorial, we will inform you that we will use the Elementor Theme Builder and Custom CSS feature to add a hover effect to the links on blog posts. The Theme Builder and Custom CSS are only accessible on Elementor Pro. So, ensure that you’ve already upgraded to the pro version.
Alright, let’s get started!
Go to your WordPress Dashboard -> Templates -> Theme Builder.
On the Theme Builder window, navigate to the Single Post. You can select your existing Single Post template or create a new one. In this example, we will open our current single post by clicking the Edit button.
Once you enter the Elementor editor, navigate to the Post Content widget settings -> Advanced tab -> Custom CSS.
Note: To see the live result, please ensure that you already publish the post/s on your site with links inside it.
Next, copy the simple CSS snippet below and paste it into the Custom CSS field.
selector .elementor-widget-theme-post-content a:hover {
text-decoration: none;
box-shadow: inset 0 -.5em 0 #FD63FD;
color: inherit;
}
The Code Explanation:
The code above selects the class selector of the Post Content widget using the .elementor-widget-theme-post-content and selects the element selector of the link using a, then the hover effect applies by adding the pseudo-element selector :hover. You can check the complete list of Elementor widget selectors here. The style of hover is defined between the curly brackets.
As you can see from the GIF above, the link has a hover effect when you add the CSS snippet into the Custom CSS field. You can also change the hover width and color by editing the value in the CSS snippet.
That’s it. Don’t forget to update or publish your single post template once you finish editing.
The Bottom Line
This article shows how easily you can add a hover effect to links on your blog post in Elementor. Links without a hover effect may look plain and not attractive to users. But please be careful about setting a hover width and color (on CSS Snippet), so your links don’t look annoying or weird.
