Adding Hover Effect to Link in WordPress Posts if Your Site is Built with Elementor

There are lots of ways to make your website looks more appealing to visitors. One of which is by adding hover effect to links. Some WordPress themes might have a built-in setting to add link hover effect. In case your theme doesn't have one, you can simply add yourself by adding custom CSS to theme customizer.

As you have known, CSS has a built-in option to add hover effect to an element selector, including the a selector which is used to target hyperlink. You can simply add the :hover to the element selector you want to add the hover effect to. That said, to add hover effect to hyperlink, you can type a:hover before the opening curly bracket on your CSS code.

Here is a code snippet for a simple hover effect for hyperlink:

a: hover{
      text-decoration: none;
    box-shadow: inset 0 -.5em 0     #FD63FD;
    color: #B017B0;
}

Adding Link Hover Effect in WordPress

As mentioned earlier, if your theme has no built-in setting to add link hover effect, you can add one yourself by adding custom CSS to theme customizer. Theme customizer itself can be accessed by going to Appearance -> Customizer on your WordPress dashboard. On theme customizer panel, you can open the Additional CSS block and add your CSS code here.

If you paste the above code snippet to the Additional CSS block without modifying it, the hover effect will be applied to all hyperlinks on your website.

If you want the hover effect to be applied to blog posts only, you can add the class selector of .single before the a element selector. So, your code would look like this one:

.single a: hover{
      text-decoration: none;
    box-shadow: inset 0 -.5em 0     #FD63FD;
    color: #B017B0;
}

Adding Link Hover Effect in WordPress If Your Website is Built Elementor

Elementor has a theme builder feature to create custom templates for your site parts, including the blog post template. If you use this feature for your blog posts, you need to replace the class selector on the above code. You can replace the .single class selector with the .elementor-widget-theme-post-content class selector.

.elementor-widget-theme-post-content is a pre-defined class selector from Elementor for the Post Content widget. Post Content itself is an Elementor widget to style up the body of your content (e.g. blog post). So, your code would look like:

.elementor-widget-theme-post-content a:hover{
      text-decoration: none;
    box-shadow: inset 0 -.5em 0     #FD63FD;
    color: #B017B0;
}

If you want to apply the hover effect to other custom Elementor templates (e.g. archive page templates) on your website, you can simply replace the class selector with the selector of the widgets you use on your templates.