dom 元素的文本装饰下划线不会为单词中的所有字母添加下划线

Question

我在锚标签上使用了

text-decoration:underline

。但问题是它没有给整个单词加下划线，而是只给选定的字母加下划线。 附图。

我使用的字体是“Gotham”。我尝试增加行高属性，但这并没有解决我的问题。有人遇到过类似的问题吗

Answer 1

这不起作用的原因是因为字母

p

、

y

、

g

、

j

等都具有所谓的 下降。它们会打断下划线的流动，并且实际上没有什么可做的。如果您确实想将其放在所有文本下，我建议废弃

text-decoration

并使用此：

a {
  display: inline-block;
  border-bottom: 1px solid #000;
}

这会产生下划线的效果，同时仍然位于所有字母下方。

Answer 2

我不确定问题到底是什么，但如果您能够采取不同的方法，为什么不将其添加到锚标记中呢？

a{
    border-bottom: solid 1px #000;
}

Answer 3

尝试做

a {
    text-decoration: underline;
    text-decoration-skip-ink: none;
}