下划线与填充物。非链接

Question

下面这行CSS是否可以用于给常规的下划线添加padding？不是链接，只是当我在一个或多个单词下划线以强调时。似乎没有什么变化。

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

干杯!

Answer 1

下划线的文字没有 阶层 .underline 其设置你可以改变。它有一个设置。text-decoration: underline ，它是 不 一样 border-bottom. 一些浏览器允许为 text-decoration 在有限的范围内对其进行改造，见 https:/caniuse.com#search=文字装饰。 . 然而，不同的浏览器之间的结果真的常常是不一样的。

.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>