Текст-подчеркивание-смещение - CSS-хитрости

text-underline-offsetСвойство в CSS устанавливает расстояние текста подчеркивания от их первоначального положения.

.text ( text-underline-offset: 0.5em; )

После того, как вы примените подчеркивание к элементу, используя text-decorationзначение подчеркивания , вы можете сказать, как далеко эта строка должна быть от вашего текста, используя text-underline-offsetсвойство.

Значения

• auto: (По умолчанию) Браузер укажет соответствующее смещение для подчеркивания.
• : Любая допустимая длина с указанными единицами измерения (включая отрицательные значения). Это заменяет любую информацию в шрифте и браузере по умолчанию.
• percentage: Задает смещение подчеркивания в процентах от 1em в шрифте элемента.
• initial: Настройка свойства по умолчанию - авто.
• inherit: Принимает значение смещения подчеркивания родительского элемента.
• unset: Удаляет текущее смещение элемента.

Демо

В следующей демонстрации вы можете изменить значение, text-underline-offsetчтобы увидеть, как оно влияет на оформление текста элемента:

Примечания

• text-underline-offset не является частью сокращения text-decoration.
• Это не работает с другими text-decorationлиниями, такими как line-throughили overline.
• Допускаются отрицательные значения, которые смещают подчеркивание внутрь.

Постоянно для потомков

После того как вы установите украшение для элемента, все его дочерние элементы тоже будут иметь это украшение. Теперь представьте, что вы хотите изменить смещение подчеркивания для одного из дочерних элементов:

p ( text-decoration: underline; text-underline-offset: 0.5em; ) 
 p span ( text-underline-offset: 1.5em; /* Doesn't work */ )

Это не работает, потому что вы не можете переопределить смещение подчеркивания, заданное элементами-предками. Чтобы это работало, вам нужно установить специфику подчеркивания для самого элемента:

p ( text-decoration: underline; text-underline-offset: 0.5em; ) 
 p span ( text-decoration: underline; text-underline-offset: 1.5em; /* It works! */ )

Рекомендуется использовать em

Преимущество использования относительного значения, такого как em, заключается в том, что смещение будет масштабироваться с изменением font-sizeзначения. С другой стороны, если вы используете фиксированную единицу длины (например, пиксели), смещение не будет адаптироваться к изменениям, и это может быть не то расстояние, которое вы хотели бы иметь для своего текста:

Процент и каскад

Для этого свойства длина наследуется как фиксированное значение и не масштабируется вместе со шрифтом. С другой стороны, процентное значение будет наследоваться как относительное значение и, следовательно, масштабироваться с изменениями шрифта по мере его наследования.

Следующая демонстрация показывает сравнение использования em и процентных значений в случае наследования, и, как вы можете видеть, с левой стороны (где мы используем em) унаследованное значение имеет фиксированную длину. Вы можете проверить вычисленное значение в DevTools. Это означает, что он не масштабируется при изменении шрифта. Однако с правой стороны тексты наследуют относительное значение (в данном случае 100%); поэтому смещение масштабируется с изменением шрифта:

Режимы ввода и положение подчеркивания текста

Режим вертикального письма влияет на положение подчеркивания. Это изменит направление смещения, примененного к элементу. Поиграйте со значениями в следующей демонстрации:

Связанный

• text-decoration
• text-underline-position
• text-decoration-thickness

Дополнительная информация

Модуль оформления текста CSS, уровень 4 (проект редакции)

Поддержка браузера

На момент написания этой статьи Firefox был единственным браузером с полной поддержкой. Safari не поддерживает процентные значения.

текст-подчеркивание-смещение

IE	Край	Fire Fox	Хром	Сафари	Опера
Нет	Нет	70+	Нет	12.1+	Все

Android Chrome	Android Firefox	Браузер Android	iOS Safari	Opera Mini
Нет	Нет	Нет	12.2+	да

текст-подчеркивание-смещение: процент

IE	Край	Fire Fox	Хром	Сафари	Опера
Нет	Нет	74+	Нет	Нет	Нет

Android Chrome	Android Firefox	Браузер Android	iOS Safari	Opera Mini
Нет	Нет	Нет	Нет	да