text-underline-position

How to easily change underline spacing of links in WordPress

by

Even with the plug and play nature of WordPress, most bloggers, at some point, realize that the slightest bit of CSS can make a world of a difference in tweaking the front end design of a website.

For those detached from the world of programming and computer science, the pressure to use an all encompassing theme can be tempting, but the truth is that most customization is quite simple.

In my latest pursuit of drilling down the subtle design changes of Click Press Play I’ve taken to reworking the spacing of underlined links.

Adding spacing or padding between a hyperlink and underline, I’ve found, is much more pleasing to the eye than one that “hugs” a link.

So, how exactly is this accomplished in a WordPress site/blog?

The answer lies in a simple line of CSS added to the custom CSS section of your theme’s appearance.

Simply perform the sequence of steps as follows in order to get to this section:

  • Go to the dashboard of your WordPress website
  • Click “Appearance” in the left sidebar column
  • Click “Edit CSS” in the expanded menu options

Once you have navigated to the “Edit CSS” section of your theme’s appearance editor you will want to add the following CSS exactly as it is written:


p a:link, p a:hover, p a:active, p a:visited {
    text-decoration: underline;
    text-underline-position: under		
}

What exactly does this code do?

In short, it makes all active links in WordPress pages display a spaced underline. This state will persist no matter whether you have hovered over, clicked, or visited a link. The backbone line of this custom CSS is text-underline-position: under, and it’s an incredibly convenient tweak in the face of other options.

The only downfall of this solution is that a couple browsers do not render this properly (Firefox for Android and Safari on iOS). You can view the full compatibility chart on Mozilla’s official documentation.

It should be noted that I am using GeneratePress and so I cannot speak to any possible compatibility conflicts with other themes. I would imagine that most themes will handle this fine but you never know with how heavy handed some page builders can be.

I have to give credit to stackoverflow in my efforts to contextualize various sources and answers for my specific use case. More specifically, this answer authored by user Duc Huynh.

Leave a Comment