⑥ Расположение линии оформления: свойство text-underline-position

Продолжим изучение темы CSS3 - оформление текста. Если пропустили прошлые статьи, то вот ссылки на них:

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

IE: —
Edge: 12
Firefox: —
Chrome: 71
Safari: —
Opera: —
iOS Safari: —
UC Browser for Android: ?
Chrome for Android: 71
Samsung Internet: —

Свойство text-underline-position устанавливает положение линии подчеркивания, указанного в элементе.

Свойство наследуется.

text-underline-position

Значения:

auto - Браузер может использовать любой алгоритм для определения позиции подчеркивания, тем не менее линия должна быть размещена на или под базовой линией текста. Значение по умолчанию.
under - Подчеркивание расположено под текстовым содержимым элемента. В этом случае подчеркивание обычно не пересекает нижний выносной элемент. Это значение можно комбинировать с left или right, если конкретная сторона предпочтительна в вертикальных типографских режимах.
left - В вертикальных типографских режимах подчеркивание выравнивается по левому краю текста. Тем не менее, это значение интерпретируется как under.
right - В вертикальных типографских режимах подчеркивание выравнивается по правому краю текста. Тем не менее, это значение интерпретируется как under.
inherit - Наследует значение свойства от родительского элемента.
initial - Устанавливает значение свойства в значение по умолчанию.

Синтаксис

CSS

text-underline-position: auto;
text-underline-position: under;
text-underline-position: left;
text-underline-position: right;
text-underline-position: under left;
text-underline-position: under right;
text-underline-position: inherit;
text-underline-position: initial;

📷 РИС. 2. ПОДЧЕРКИВАНИЕ ТЕКСТА С ОБЕИХ СТОРОН В ВЕРТИКАЛЬНЫХ ТИПОГРАФСКИХ РЕЖИМАХ С ПОМОЩЬЮ ЗНАЧЕНИЙ LEFT И RIGHT

Продолжение в следующей статье!