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;
}