带填充的下划线：非链接答案

【问题标题】：Underline with padding: Non-links带填充的下划线：非链接
【发布时间】：2020-04-29 22:33:20
【问题描述】：

下面的 CSS 行是否可以为常规下划线添加填充？不是链接，只是当我强调一个或多个单词时。似乎什么都没有改变。

.underline {
  padding-bottom: 2px;
  border-bottom: black 2px solid;
}

干杯！

【问题讨论】：

“添加填充”是什么意思？它似乎可以正常工作。见：jsfiddle.net/uspv78my/1

标签： css padding underline

【解决方案1】：

带下划线的文本没有您可以更改其设置的类 .underline。它有一个设置：text-decoration: underline，与border-bottom不相同。一些浏览器允许text-decoration 的附加参数在有限范围内设置样式，请参阅https://caniuse.com/#search=text-decoration。但是，不同浏览器之间的结果确实经常看起来不同...

.a {
  text-decoration: underline;
}

.b {
  border-bottom: 1px solid black;
  padding-bottom: 3px;
}

<p>This is an example for <span class="a">underlined text</span> within a phrase. Usually a &lt;span&gt; element is used to apply "text-decoration: underline". The vertical distance to the baseline of the text depends on the browser and usually can't be changed.</p>
<p>A "border-bottom" is <span class="b">something completely different</span>. Here the distance to the text can be set manually by using a "padding-bottom".</p>

【讨论】：