Подчеркивание с отступом: не ссылки

Question

Должна ли следующая строка CSS работать для добавления отступов к обычным подчеркиваниям? Не ссылки, просто когда я подчеркиваю одно или несколько слов для акцента. Кажется, ничего не меняется.

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

Ура!

Answer 1

Подчеркнутый текст не имеет класса .underline, настройки которого вы можете изменить. Он имеет настройку: text-decoration: underline, которая не такая же, как border-bottom. Некоторые браузеры допускают дополнительные параметры для text-decoration, чтобы ограничить его стиль, см. https://caniuse.com/#search = text-ornament . Тем не менее, результаты действительно часто выглядят по-разному в разных браузерах ...

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