text-underline-position
Свойство определяет размещение подчеркивания на ссылках или по тексту с text-decoration: underline;
приложенным.
a ( text-underline-position: under; )
Значения
Это значения, указанные в рекомендации кандидата уровня 3 модуля оформления текста CSS W3C:
auto
: по умолчанию. Браузер будет выбирать между размещением подчеркивания на базовой линии текста или под ним.inherit
: наследует подчеркнутую позицию родительского элемента.under
: помещает подчеркивание под текстом с дополнительным пространством для предотвращения пересечения нижних элементов.left
: для режимов вертикального письма. Это поместит строку слева от текста.right
: для режимов вертикального письма. Это поместит строку справа от текста.
Microsoft использует другой набор значений для Internet Explorer:
auto
: по умолчанию. Помещает подчеркивание под текстом для всех языков, кроме японского (подробности см. По ссылке MSDN в разделе «Дополнительная информация» ниже).above
: помещает подчеркивание над текстом. Визуально идентиченtext-decoration: overline;
below
: помещает подчеркивание под текстом. Обратите внимание, что это отличается отunder
- он не очищает нижние элементы.auto-pos
работает так же, как реализация MSauto
.
Демо
На момент написания этой статьи text-underline-position
поддерживается только частично Chrome (33+ с включенными экспериментальными флагами) и Internet Explorer 6+. Chrome поддерживает auto
, inherit
и under
значение из W3C Candidate Recommendation, в то время как IE поддерживает свои собственные альтернативные значения.
Этот пример показывает , что under
и below
значение в браузерах , которые поддерживают их.
См. Pen text-underline-position от CSS-Tricks (@ css-tricks) на CodePen.
Связанный
- текст-украшение
Дополнительная информация
text-underline-position
в модуле оформления текста CSS уровня 3 CR.text-underline-position
в MSDN.
Поддержка браузера
Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
---|---|---|---|---|---|---|
33 * | Никто | Никто | Никто | 6 † | Никто | Никто |
* с -webkit
включенными префиксом и экспериментальными флагами в chrome: // flags. left
и right
значения не поддерживаются.
† со значениями -ms
префикса и IE.