11 Cool Hover Link Effects That Works Across Multiple Lines

Blog Champs is reader-supported. By following through with a purchase, I may earn a commission at no expense to you. Thank you for your support.

Looking for hover link effects for your WordPress blog?

Well, I've created 11 of them for you to choose from, and there are more on the way, so stay tuned! These hover link effects work across multiple lines and are so simple that anyone can implement them. These link effects are created purely with CSS, so adding them to your WordPress blog is incredibly easy.

You only need to copy the CSS code and place them into the Additional CSS field from your theme's customizer menu, then change the class names to the appropriate class. It's a great way to add some pizazz to your website to impress your readers.

Check 'em out:

See the Pen 11 In-Text Link Effects by Kyle (@CorporalMann) on CodePen.

Step 1

First, copy the CSS code for which you would like to use on your blog. For example, this is the CSS for the 7th link effect on my list:

/*start link7 effect*/
.link7
{
    text-decoration: none;
    color: black;
    background-image: linear-gradient(#ffd700, #ffd700);
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-size: 100% 2px;
    transition: background-position .15s, background-size .12s;
    transition-property: background-position, background-size;
    transition-delay: 0s, .19s;

    position: relative;
}
.link7:hover, .link7:focus
{ 
    background-position: 100% 0%;
    background-size: 100% 100%;
}
/*end link7 effect*/

Step 2

From the WordPress dashboard, navigate to Appearance > Customize > Additional CSS.

Adding hover link effects to WordPress
Adding CSS to WordPress – Additional CSS

Paste the CSS code into the editor.

Adding hover link effects to WordPress with CSS
Additional CSS field

Step 3

Change “.link7” to “p > a:link“. Your code should now look like this:

/*start link7 effect*/
p > a:link
{
    text-decoration: none;
    color: black;
    background-image: linear-gradient(#ffd700, #ffd700);
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-size: 100% 2px;
    transition: background-position .15s, background-size .12s;
    transition-property: background-position, background-size;
    transition-delay: 0s, .19s;
    position: relative;
}


p > a:link:hover, p > a:link:focus
{ 
    background-position: 100% 0%;
    background-size: 100% 100%;
}
/*end link7 effect*/

Step 4

It should now be working!

To add more selectors to the effect, just separate them with commas. For example:

/*start link7 effect*/
p > a:link, h2.entry-title a:link
{
    text-decoration: none;
    color: black;
    background-image: linear-gradient(#ffd700, #ffd700);
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-size: 100% 2px;
    transition: background-position .15s, background-size .12s;
    transition-property: background-position, background-size;
    transition-delay: 0s, .19s;
    position: relative;
}


p > a:link:hover, p > a:link:focus, h2.entry-title a:hover, h2.entry-title a:focus
{ 
    background-position: 100% 0%;
    background-size: 100% 100%;
}
/*end link7 effect*/

And that's all there is to it. Enjoy!

More Help

If you need more help using CSS or would just like to save money on premium themes, read my Super Easy CSS Styling Guide for WordPress to learn more about customizing WordPress with CSS.

Super Easy WordPress CSS Styling Guide
Super Easy WordPress CSS Styling Guide
Super Easy WordPress CSS Styling Guide

Let me know what you think about these cool hover link effects in the comments below. If something is not working, let me know!

Thank you.

Photo of author

About the Author

Forced out of Colorado because of the housing market, Kyle now writes WordPress guides out of his Florida apartment, hoping one day to return to the mountains from which he came.
Why I Left SiteGround and How I Found My Next Hosting Provider

After many years with SiteGround, I finally made the switch, and I'm glad I did. Read the full story here.

Leave a Comment