Css text decoration weight

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

The text-decoration shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for text-decoration-line , text-decoration-color , text-decoration-style , and the newer text-decoration-thickness property.

Try it

Text decorations are drawn across descendant text elements. This means that if an element specifies a text decoration, then a child element can’t remove the decoration. For example, in the markup

This text has some emphasized words in it.

, the style rule p < text-decoration: underline; >would cause the entire paragraph to be underlined. The style rule em < text-decoration: none; >would not cause any change; the entire paragraph would still be underlined. However, the rule em < text-decoration: overline; >would cause a second decoration to appear on «some emphasized words».

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

text-decoration: underline; text-decoration: overline red; text-decoration: none; /* Global values */ text-decoration: inherit; text-decoration: initial; text-decoration: revert; text-decoration: revert-layer; text-decoration: unset; 

The text-decoration property is specified as one or more space-separated values representing the various longhand text-decoration properties.

Values

Sets the kind of decoration used, such as underline or line-through .

Sets the color of the decoration.

Sets the style of the line used for the decoration, such as solid , wavy , or dashed .

Sets the thickness of the line used for the decoration.

Formal definition

• text-decoration-color : currentcolor
• text-decoration-style : solid
• text-decoration-line : none

• text-decoration-line : as specified
• text-decoration-style : as specified
• text-decoration-color : computed color
• text-decoration-thickness : as specified

• text-decoration-color : a color
• text-decoration-style : discrete
• text-decoration-line : discrete
• text-decoration-thickness : by computed value type

Formal syntax

Examples

Demonstration of text-decoration values

.under  text-decoration: underline red; > .over  text-decoration: wavy overline lime; > .line  text-decoration: line-through; > .plain  text-decoration: none; > .underover  text-decoration: dashed underline overline; > .thick  text-decoration: solid underline purple 4px; > .blink  text-decoration: blink; > 

p class="under">This text has a line underneath it.p> p class="over">This text has a line over it.p> p class="line">This text has a line going through it.p> p> This a class="plain" href="#">link will not be underlineda>, as links generally are by default. Be careful when removing the text decoration on anchors since users often depend on the underline to denote hyperlinks. p> p class="underover">This text has lines above em>andem> below it.p> p class="thick"> This text has a really thick purple underline in supporting browsers. p> p class="blink"> This text might blink for you, depending on the browser you use. p> 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• The individual text-decoration properties are text-decoration-line , text-decoration-color , text-decoration-style , and text-decoration-thickness .
• The text-decoration-skip-ink , text-underline-offset , and text-underline-position properties also affect text-decoration, but are not included in the shorthand.
• The list-style attribute controls the appearance of items in HTML and lists.

Found a content problem with this page?

This page was last modified on Apr 20, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

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.

Источник