How to reduce the gap in dotted underline link?

Question

We have custom link with dotted underlined style.

How can I reduce the gap? Currently padding: 0; and line-height is not working.

Answer 1

Here's something you could try that is a bit verbose, but if you really want to close the gap you could try adding an absolutely placed pseudo element that recreates the underline.

Here's my Fiddle.

Edit: Here's a Fiddle updated by @bradchristie in the comments with a before and after using the OP's styles.

And here's my CSS:

a {
  background: #ff0;
  color: #f00;
  position: relative;
  text-decoration: none;
}

a::after {
  border-bottom: 1px dotted #f00;
  bottom: 3px;
  content: '';
  height: 0;
  left: 0;
  position: absolute;
  right: 0;
}

Answer 2

Since you are not using underline but a bottom border, the space is there to accommodate any text that might be there, including descenders and diacritic marks that might appear below the baseline. So you would need to defeat normal line formatting, e.g. by using trickery that reduces the content height, e.g. by setting

a { display: inline-block; line-height: 0.8; height: 0.8em; }