text-decoration-thickness
The text-decoration-thickness property in CSS sets the stroke thickness of the decoration line that is used on text in an element. The text-decoration-line value needs to be either underline , line-through , or overline to reflect the thickness property.
text-decoration-thickness: auto | from-font | |
- auto : (Default) Allows the browser to specify an appropriate thickness for the text decoration line.
- from-font : If the first available font has metrics specifying a preferred thickness, it uses that thickness; otherwise it behaves like the auto value.
- : Any valid length with a unit specifies the thickness of text decoration lines as a fixed length. This replaces any information in the font and the browser default.
- percentage : Specifies the thickness of text decoration lines as a percentage of 1em in the element’s font.
- initial : The default setting of the property, which is auto .
- inherit : Adopts the decoration thickness value of the parent.
- unset : Removes the current thickness from the element.
Change the value of text-decoration-thickness in the following demo to see how the property affects the text decoration of the element:
It is constant for descendants
After setting a decoration for an element, all its children will have that decoration too. Now imagine we want to change the thickness of the decoration for one of the children:
This doesn’t work because the decoration thickness specified by ancestor elements cannot be overridden. For this to work, a decoration specificity needs to be set for the element itself:
Percentage and the cascade
For this property, a length will inherit as a fixed value, and will not scale with the font. On the other hand, a percentage will inherit as a relative value and, therefore, scale with changes in the font as it inherits.
The following demo shows the comparison between using em and percentage values in the case of inheritance and, as you can see, on the left side (in which we are using em) the inherited value is a fixed length. That means it doesn’t scale with the change in the font. On the right side, however, the text inherits a relative value (in this case 20%); therefore the thickness scales with the change in the font.
While the current working draft of the specification references percentage values for text-decoration-thickness , actual support is currently limited to Firefox.
Using with text-decoration
The current working draft of the CSS Text Decoration Module Level 4 specification includes text-decoration-thickness as a value in the text-decoration shorthand property.
.link < text-decoration: underline solid green 1px; >/* The longhand equivalent */ .link
While text-decoration is well supported, support for the inclusion of text-decoration-thickness is currently limited to Firefox.
| Feature | IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|---|
| Property | No | No | 70 | No | 12.1 | No |
| Percentages | No | No | 76 | No | No | No |
| Shorthand | No | No | 70 | No | No | No |
| Feature | Android Chrome | Android Firefox | Android Browser | iOS Safari | Opera Mini |
|---|---|---|---|---|---|
| Property | No | No | No | 12.2 | No |
| Percentages | No | No | No | No | No |
| Shorthand | No | No | No | No | No |
Source: caniuse
- The property used to be called text-decoration-width , but was updated in the 2019 working draft of the CSS Text Decoration Module Level 4 specification.
- The browser must use a minimum thickness of 1 device pixel.
text — decoration — thickness
Какой будет толщина декоративной линии под (или над) текстом?
Время чтения: меньше 5 мин
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство text — decoration — thickness управляет толщиной декоративной линии у текста, если она задана свойством text — decoration .
Пример
Скопировать ссылку «Пример» Скопировано
Для примера создадим три абзаца текста и зададим для них разные значения.
Текст с голубым подчёркиванием в 1px.
Текст с голубым подчёркиванием в 3px.
Текст с голубым подчёркиванием в 5px.
p class="thin">Текст с голубым подчёркиванием в 1px.p> p class="thick">Текст с голубым подчёркиванием в 3px.p> p class="shorthand">Текст с голубым подчёркиванием в 5px.p>
.thin text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: #2e9aff; text-decoration-thickness: 1px;> .thick text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: #2e9aff; text-decoration-thickness: 3px;> .shorthand text-decoration: underline solid #2e9aff 5px;>.thin text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: #2e9aff; text-decoration-thickness: 1px; > .thick text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: #2e9aff; text-decoration-thickness: 3px; > .shorthand text-decoration: underline solid #2e9aff 5px; >
Свойство text — decoration является шорткатом и позволяет указать все значения сразу.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
- auto — значение по умолчанию, браузер сам определит толщину линии.
- from — font — если в файле шрифта прописана предпочтительная толщина декоративной линии, то будет использована она. Если нет, то значение будет установлено в auto .
- Толщина в единицах измерения — можно задать толщину линии во всех доступных единицах измерения.
Обратите внимание, что толщина в процентах поддерживается не всеми браузерами. Подробнее на Can I use.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡 Свойство text — decoration — thickness может менять толщину подчёркивания у ссылок ( ), а также его можно анимировать при помощи transition .
На практике
Скопировать ссылку «На практике» Скопировано
Ярослав Лебеденко советует
Скопировать ссылку «Ярослав Лебеденко советует» Скопировано
🛠 На практике одного text — decoration — thickness может быть не достаточно поэтому стоит обратить внимание на такие свойства как text — decoration — skip — ink и text — underline — offset . Ниже приведён пример совместной работы этих свойств.
HTML CSS JavaScript Веб-платформаnav> ul class="nav-list"> li class="nav-list__item"> a class="nav-list__link orange" href="#0">HTMLa> li> li class="nav-list__item"> a class="nav-list__link blue" href="#0">CSSa> li> li class="nav-list__item"> a class="nav-list__link yellow" href="#0">JavaScripta> li> li class="nav-list__item"> a class="nav-list__link green" href="#0">Веб-платформаa> li> ul> nav>
.nav-list__link display: inline-block; color: #fff; font-size: 36px; line-height: 1.3; padding: 6px 10px; text-decoration-skip-ink: none; text-decoration-thickness: 4px; text-underline-offset: -40px; transition: 150ms ease-in-out;> .nav-list__link:hover,.nav-list__link:focus text-decoration-thickness: 2px; text-underline-offset: 10px; text-decoration-color: currentColor;> .orange text-decoration-color: #ff852e;> .blue text-decoration-color: #2e9aff;> .yellow text-decoration-color: #ffd829;> .green text-decoration-color: #40e746;>.nav-list__link display: inline-block; color: #fff; font-size: 36px; line-height: 1.3; padding: 6px 10px; text-decoration-skip-ink: none; text-decoration-thickness: 4px; text-underline-offset: -40px; transition: 150ms ease-in-out; > .nav-list__link:hover, .nav-list__link:focus text-decoration-thickness: 2px; text-underline-offset: 10px; text-decoration-color: currentColor; > .orange text-decoration-color: #ff852e; > .blue text-decoration-color: #2e9aff; > .yellow text-decoration-color: #ffd829; > .green text-decoration-color: #40e746; >
О значении current Color читайте в статье «Цвета в вебе»
text-decoration-thickness
The text-decoration-thickness CSS property sets the stroke thickness of the decoration line that is used on text in an element, such as a line-through, underline, or overline.
Try it
Syntax
/* Single keyword */ text-decoration-thickness: auto; text-decoration-thickness: from-font; /* length */ text-decoration-thickness: 0.1em; text-decoration-thickness: 3px; /* percentage */ text-decoration-thickness: 10%; /* Global values */ text-decoration-thickness: inherit; text-decoration-thickness: initial; text-decoration-thickness: revert; text-decoration-thickness: revert-layer; text-decoration-thickness: unset;
Values
The browser chooses an appropriate width for the text decoration line.
If the font file includes information about a preferred thickness, use that value. If the font file doesn’t include this information, behave as if auto was set, with the browser choosing an appropriate thickness.
Specifies the thickness of the text decoration line as a , overriding the font file suggestion or the browser default.
Formal definition
| Initial value | auto |
|---|---|
| Applies to | all elements. It also applies to ::first-letter and ::first-line . |
| Inherited | no |
| Percentages | refer to the font size of the element itself |
| Computed value | as specified |
| Animation type | by computed value type |
Formal syntax
Как установить толщину подчеркивания ссылки через CSS?
Добрый вечер!
Подскажите, пожалуйста, как реализовать толщину подчеркивания ссылки и поместить линию под текст ссылки?
Пример:
Boy: Что не получилось? Цифорки подогнать проблема?
a font-size:30px;
display:inline-block;
text-decoration:none;
>
a:after display:block;
content:»;
width:100%;
height:7px;
background:#ddd;
margin-top:-11px;
>
marrs: это ссылка которую я хочу изменить:
product-overview__summary .product__meta .author font-family: «Roboto»;
font-weight: 700;
color: #26245E;
float: left; >
media screen and (max-width: 480px) .product-overview__summary .product__meta .author float: none; > >
У вас более подходящий вариант, но не могу понять, почему у меня не получается.
Исходный код ссылки которую я хочу декорировать (имя автора)
.product-overview__summary .product__meta .author font-family: «Roboto»;
font-weight: 700;
color: #26245E;
float: left; >
media screen and (max-width: 480px) .product-overview__summary .product__meta .author float: none; > >