How to reduce the gap in a dotted link?

Question

We have a custom link with a dotted underline style.

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

Answer 1

Here you can try it in a little more detail, but if you really want to close the gap, you can try adding a completely placed pseudo-element that recreates the underline.

Here is my fiddle .

Edit: here is Fiddle updated by @bradchristie in comments using before and after using OP styles.

And here is 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 an underscore, but a lower border, the space should contain any text that may be there, including descenders and diacritics that may appear below the baseline. This way you will need to defeat the normal string formatting, for example. using cheating that reduces the height of the content, for example. setting

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