0

I am playing around with custom hyperlinks for my WordPress page and would like to style them so that the underline hugs the bottom of the text very closely, i.e.: I want to be able to decrease the space between the text and the underline. So far I've found one solution that involves using an image in place of the underline, but I wonder if there are other solutions available.

Louis
  • 1

1 Answers1

0

You can use the border property of a span and then line-height to create the effect you're looking for without using an image:

<a href="link.html"><span>Link</span></a>

CSS:

span {
    display:inline-block;
    border-bottom:1px solid black;
    line-height: 12px;
}

a {
  text-decoration:none;
}

Example: https://jsfiddle.net/fraggley/Lujyowxz/2/

fraggley
  • 1,215
  • 2
  • 9
  • 19
  • Is there a way to do this so it happens automatically with every hyperlink? Not just the ones with the tag? – Louis May 31 '20 at 15:33