为什么CSS文本修饰下划线会导致不同的基线？

Question

对于悬停如下的链接使用文字装饰：下划线：

a:HOVER {
    text-decoration: underline;
}

这意味着与普通文本相比，作为链接一部分的文本将设置在基线上方。请参阅下图以查看此问题。

蓝色文本是链接，灰色文本是普通的span元素。蓝色文字高于基线。

如何在同一基线上设置它们？