Свойство CSS text-underline-position
Используйте CSS-свойство text-underline-position для указания положения подчёркивания элемента. Значения и примеры.
CSS-свойство text-underline-position управляет тем, где проводится линия подчёркивания относительно текста. Оно вступает в силу только тогда, когда подчёркивание уже существует — то есть когда для элемента задано свойство text-decoration (или text-decoration-line) со значением underline. Само по себе text-underline-position никогда не рисует подчёркивание — оно лишь изменяет его положение.
По умолчанию (auto) браузер размещает линию вплотную к алфавитной базовой линии текста. Для большинства латинских символов это выглядит нормально, однако линия может пересекаться с нижними выносными элементами букв g, j, p, q и y. Значение text-underline-position: under опускает линию ниже всех нижних выносных элементов, чтобы она никогда не пересекала их — удобно для листингов кода, математических формул или химических формул, где важен чёткий отступ.
На этой странице рассматриваются синтаксис, все значения, когда и какое из них применять, а также интерактивные примеры.
Когда это применять?
- Чистые подчёркивания — используйте
under, чтобы линия не задевала нижние выносные элементы (p,y,g), а проходила под ними. - Аннотирование формул — под математическими или химическими выражениями, где пересечение с базовой линией создало бы неоднозначность.
- Вертикальный текст — значения
leftиrightуказывают, с какой стороны символов проводится линия, когда свойствоwriting-modeзадаёт вертикальное направление.
Свойство text-underline-position поддерживается во всех современных браузерах.
| Начальное значение | auto |
|---|---|
| Применяется к | Всем элементам. |
| Наследуется | Да. |
| Анимируется | Нет. |
| Версия | CSS3 |
| DOM-синтаксис | object.style.textUnderlinePosition = "under"; |
Примечание: в JavaScript CSS-свойства с дефисами записываются в camelCase (например, text-underline-position становится textUnderlinePosition).
Синтаксис
Значения CSS text-underline-position
text-underline-position: auto | [ under || left || right ] | initial | inherit;Ключевое слово auto нельзя комбинировать с другими значениями. Ключевые слова under, left и right можно комбинировать (например, under left), однако left и right взаимоисключают друг друга — можно выбрать только одно из них, при необходимости вместе с under.
Пример свойства text-underline-position:
Пример кода CSS text-underline-position
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration: underline;
text-underline-position: under;
}
</style>
</head>
<body>
<h2>Text underline-position property example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Результат
Пример свойства text-underline-position со значением «under»:
Пример значения under свойства CSS text-underline-position
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration: underline;
text-underline-position: under;
text-decoration-color: #1c87c9;
font-size: 25px;
}
</style>
</head>
<body>
<h2>Text underline-position property example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Пример с вертикальным writing-mode и значением «left»:
В вертикальном тексте значения left и right определяют, с какой стороны символов проходит линия подчёркивания.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
writing-mode: vertical-rl;
text-decoration: underline;
text-underline-position: left;
font-size: 25px;
}
</style>
</head>
<body>
<h2>Vertical text with text-underline-position: left</h2>
<p>Lorem Ipsum is simply dummy text.</p>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| auto | По умолчанию. Браузер использует собственный алгоритм для размещения линии у алфавитной базовой линии или чуть ниже неё. |
| under | Принудительно опускает подчёркивание ниже содержимого текста, чтобы оно не пересекало нижние выносные элементы букв g, p и y. |
| left | В вертикальном режиме writing-mode размещает подчёркивание с левой стороны текста. В горизонтальном тексте игнорируется. |
| right | В вертикальном режиме writing-mode размещает подчёркивание с правой стороны текста. В горизонтальном тексте игнорируется. |
| initial | Устанавливает для свойства значение по умолчанию (auto). |
| inherit | Наследует значение свойства от родительского элемента. |
Связанные свойства
- text-decoration — сокращённое свойство, которое непосредственно рисует линию (
text-underline-positionлишь изменяет её положение). - text-decoration-line — выбор типа линии:
underline,overlineилиline-through. - text-decoration-color — задаёт цвет подчёркивания.
- text-decoration-style — стиль линии: сплошная, пунктирная, точечная, двойная или волнистая.