Perhaps you use border-bottom instead of text-decoration: underline to underline links or other text. But if this underline is too far from the text, you have a problem, because you cannot position a border closer to the text. Here I show you how you can resolve that.
As you can see, the border is displayed at the lower edge of the blue area which appears when selecting text. The height of this area is different from font to font and in my current project too large at the bottom. It looks like the line should be a border between the lines, not an underline.
As far as I know, this mark can’t be affected, and a border can’t be positioned inside this area.
A gradient can be set as the value of the CSS background-image property (according to Can I Use this works since IE10). We specify the same color for start and end and get a one-color box. We can specify the size of the box with the property background-size – in our case, a width of 100 percent and a height of one pixel, to get a line. With background-position, this line can be positioned, and finished is the underline in the right position.