CSS text-underline-offset — відстань підкреслення від тексту

CSS властивість text-underline-offset задає відстань підкреслення від тексту.

правити

Загальний опис

Стандартне підкреслення часто проходить просто по хвостиках літер «р», «у», «д» — і текст стає гіршим для читання. Пара пікселів відступу все виправляє.

Разом із text-decoration-thickness це дає повний контроль над виглядом посилань — без підробки підкреслення через border-bottom.

правити

Порада

Пара text-underline-offset: 3px + text-decoration-thickness: 2px робить посилання помітними й акуратними водночас.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

text-underline-offset: auto | <length> | <percentage>;

Властивість text-underline-offset може отримувати 3 значень:

auto

Відстань обирає браузер.

автор: NagarD

правити

length

Фіксована відстань від базової лінії.

автор: NagarD

правити

percentage

Відсоток від розміру шрифту.

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
text-underline-offset	87+	70+	12.1+	73+	87+	-

Підтримка: мобільні переглядачі

Переглядач
text-underline-offset	87+	yes	yes	12.2+

Приклади

+ запропонувати свій приклад у пісочниці

<p>Ось <a href="#">посилання з підкресленням</a> у тексті.</p>

a {
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}