An example of the link effect we're making.

This article is going to discuss adding custom styling to your hyperlinks in WordPress.

The hyperlink has been around since the beginning of the Internet, and remained fairly standard up until the late 2010s. At that point, designers began removing the underline, adding interesting hover effects, and changing around the general styling of the <a>.

Today, we are seeing a resurgence back to the standard hyperlink, mainly because users are familiar with it, it results in higher clickthrough rates, and it's simply the default setting when using WordPress.

We recently ran a test to see if removing underlines influenced the clickthrough rate on our WordPress website. We found that when under lines were removed, users would click less links on the website. As soon as underlines were added back, users ended up clicking more links. What this meant is that an underline is an essential element of any link online.

However, as a design agency we wanted to spruce up the hyperlinks on our website a bit. If you go onto code pen, and search for hyperlink styling, you'll come across tons of code snippets that you can use to Change the design and form of a link on your site. However, we noticed that most of them involved adding underlines when the user hovers over the link. that means that there are no underlines to begin with, resulting in lower clickthrough rates greed

We wanted to create a code snippet that could be implemented on any WordPress website which would animate the hyperlink underline when the user hovers over the link.

Instead of adding the underline, the underline would be removed. This is done so users still know that it is a link to be clicked on, and get visual feedback when hovering over the link.

By animating the underline to swipe away when the link is hovered, our website has a bit more of a custom feel to it. We noticed that several other websites in our niche do the same thing. They use hyperlinks with underlines, but when users hover over them the underlines become animated in some way.

Our favorite example of this is the link styling over at the Kinsta Blog. We decided to use the links on that blog as inspiration. Here's the chunk of CSS that applies pretty hover effects to hyperlinks. It's easily installable in a WordPress website, which we'll discuss below.

CSS To Style Hyperlinks In WordPress

Here's a neat diagram that shows the code and explains what each line does, which was posted to Reddit. It received very positive feedback, as well as some additional suggestions on how to improve the code.

Here's the code that you can use to apply similar styling to your own hyperlinks on your WordPress website. As an example, you can hover over this link to see the effect that this code applies. Originally inspired by the links on the Kinsta Blog.

a {
color: #6699CC;
background-image: linear-gradient(transparent calc(100% - 2px),#6699CC 1px);
text-decoration: none;
background-size: 100% 100%;
background-position: 100%;
position: relative;
background-repeat: no-repeat;
transition: all .2s;
}

a:hover {
  background-size: 0 100%;
}Code language: CSS (css)

The reason we like this code is because it applies a hover effect to all types of hyperlinks, even if they are multiline (You can see this in action By hovering over the example above this code).

There was some concern in the subreddit that this code may be a bit heavy to simply animate a hyperlink (and that it would cause repaints), and another way of adding hyperlink hover effects to WordPress surfaced.

Here's the code (created by the poster of that comment):

body{
  padding: 1.5rem;
}

a{
  position: relative;
  text-decoration: none;
  color: purple;
  
  &:after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.1em;
    min-height: 1px;
    background-color: currentColor;
    transform-origin: right;
    transition: transform .25s ease;
  }
  
  &:hover{
    
    &:after{
      transform: scaleX(0);
    }
  }
}Code language: JavaScript (javascript)

And here's what it does:

An example of a link styled with this method.

This method is a bit more lightweight and doesn't cause repaints, but the major issue with it is that it won't work a link that spans multiple lines. If there are any breaks in the text of the link, the underline will only apply to the lowest line. You can see that if you hover over this example.

In our opinion, this could definitely be a deal breaker, which is why we prefer the first code snippet.

How To Style Links In WordPress

 Actually styling hyperlinks in Word press is fairly easy. All you need to do is copy and paste the code into a CSS editor that applies it to the styles on your WordPress website. You can do this a couple of ways, but the simplest and easiest method of applying custom CSS to WordPress is using the built-in CSS editor which can be found under Appearances --> Customize.  

(You can also use this plugin which will apply CSS even if your theme changes.)

Once the customiser interface pops up, simply click on the custom CSS tab (typically it's the lowest link in the menu) and paste your code. Click the publish button, and the hyperlink styling should be applied to your WordPress website.

Keep in mind, the base code will apply the link underline styling to the entirety of your WordPress website. In some cases, this is what you want, but in other cases you only want the hyperlink styling to apply to Content.

On our website, we've specified (using CSS) that the hyperlink styling should only apply to blog post content.

We did this by specifically selecting post content by using an element ID like so:

#post-content a {your code here}

Doing this varies from theme to theme, as some will actually tag a wrapper that surrounds the post content, while others won't. The actual method and selector that you use is unique to your own website. You can use a developer toolkit like Chrome Dev Tools to figure out what selector surrounds your post content and apply it to the code.

Conclusion

This article should have introduced you to the concept of changing and animating hyperlinks on your WordPress website. This is a great way to add a custom touch to any site, the code is fairly simple and easy to apply, and it works universally.

If you have any questions about applying CSS styling to hyperlinks in WordPress, feel free to reach out in the comments.