CSS text-decoration-thickness — товщина підкреслення

CSS властивість text-decoration-thickness задає товщину лінії підкреслення чи перекреслення.

правити

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

Тонке підкреслення губиться на екранах із високою щільністю пікселів, товсте — виглядає грубо. Тепер це керовано.

Окреме значення from-font бере товщину з метрик самого шрифту, якщо той її задає — найакуратніший варіант для гарної типографіки.

правити

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

Синтаксис

text-decoration-thickness: auto | from-font | <length> | <percentage>;

Властивість text-decoration-thickness може отримувати 4 значень:

auto

Товщину обирає браузер.

автор: NagarD

правити

from-font

Товщина з метрик шрифту, якщо шрифт її задає.

автор: NagarD

правити

length

Фіксована товщина.

автор: NagarD

правити

percentage

Відсоток від 1em.

автор: NagarD

правити

Переглядачі

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

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

Переглядач
text-decoration-thickness	89+	70+	12.1+	75+	89+	-

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

Переглядач
text-decoration-thickness	89+	yes	yes	12.2+

Приклади

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

<p><a href="#">Посилання з товстішим підкресленням</a></p>

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