CSS text-underline-position — положення підкреслення
Властивості text-underline-position визначає позицію підкреслення, зазначеного для елементу.
Властивість використовується разом з властивістю text-decoration-line (або властивістю text-decoration), щоб визначити, де повинна розміщуватися лінія.
Приймає в якості значень ключові слова: under, left, right.
Загальний опис
автор: NagarD
- Нотатка
-
Властивість дуже погано підтримується сучасними браузерами. Значення
автор: Wsewladleftirightвзагалі не працюють.
Синтаксис
text-underline-position: auto | under | left | rightВластивість text-underline-position може отримувати 4 значень:
-
auto -
Лінія розташовується стандартно. Значення без задання.
автор: Wsewlad -
under -
Аналогічно до auto.
автор: Wsewlad -
left -
Якщо текст написаний вертикально, розташовує лінію ліворуч.
автор: Wsewlad -
right -
Якщо текст написаний вертикально, розташовує лінію праворуч.
автор: Wsewlad
| Значення без задання: | auto |
|---|---|
| Наслідує: | Так |
| Анімується: | Ні |
| JavaScript синтаксис: | element.style.textDecoration = ''; |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 33 | 74 | 12.1 | 20 | 12 | 6 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4.3 | 33 | 79 | 12.2 |
Приклади
+ запропонувати свій приклад у пісочниці
З auto лінія підкреслення може різати нижні виноси літер (у, р, д), з under — проходить нижче всіх виносів.
HTML
<p class="auto">Підкреслення auto: буряк, група, дудка.</p>
<p class="under">Підкреслення under: буряк, група, дудка.</p>CSS
p {
text-decoration: underline;
font-size: 22px;
}
.under {
text-underline-position: under;
}Три однакові рядки з хвостатими літерами. При auto лінія проходить крізь «у», «р», «д»; under опускає її під них; text-underline-offset дає точний відступ у будь-яку сторону.
HTML
<p class="auto">Підкреслення auto: друкарня, цукру, ярд</p>
<p class="under">Підкреслення under: друкарня, цукру, ярд</p>
<p class="offset">З text-underline-offset: друкарня, цукру, ярд</p>CSS
p {
margin-bottom: 16px;
font-size: 26px;
text-decoration: underline;
text-decoration-thickness: 2px;
text-decoration-skip-ink: none;
}
.auto {
text-underline-position: auto;
}
.under {
text-underline-position: under;
}
.offset {
text-underline-offset: 0.35em;
}Коментарі
Коментарів ще немає — будьте першим!