text-decoration-thickness

このロケールの翻訳が存在しないため、英語バージョンのコンテンツを表示しています。 Help us translate this article!

The text-decoration-thickness CSS property sets the thickness, or width, of the decoration line that is used on text in an element, such as a line-through, underline, or overline.

Syntax

/* Single keyword */
text-decoration-thickness: auto;
text-decoration-thickness: from-font;

/* length */
text-decoration-thickness: 0.1em;
text-decoration-thickness: 3px;

/* Global values */
text-decoration-thickness: inherit;
text-decoration-thickness: initial;
text-decoration-thickness: unset;

Values

auto
The browser chooses an appropriate width for the text decoration line.
from-font
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.
<length>
Specifies the thickness of text decoration line as a <length>, overriding the font file suggestion or the browser default.

Formal syntax

auto | from-font | <length>

Examples

<p class="longhand">Here's some text with a 2px red underline.</p>
<p class="under-and-over">This one has under and overline.</p>
<p class="shorthand">This will have a 1px blue underline if shorthand is supported.</p>
.longhand { 
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 2px;
}

.under-and-over {
  text-decoration-line: underline overline;
  text-decoration-style: solid;
  text-decoration-color: orange;
  text-decoration-thickness: 0.2rem;
}

.shorthand {
  text-decoration: underline solid blue 1px;
}

Specifications

Specification Status Comment
CSS Text Decoration Module Level 4
The definition of 'text-decoration-width' in that specification.
Working Draft Initial definition.

Note: The property used to be called text-decoration-width, but was updated in 2019 to text-decoration-thickness.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
text-decoration-thickness
Experimental
Chrome No support NoEdge No support NoFirefox Full support 70
Full support 70
Full support 69
Alternate Name Disabled
Alternate Name Uses the non-standard name: text-decoration-width
Disabled From version 69: this feature is behind the layout.css.text-decoration-width.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support NoSafari Full support 12.1WebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS Full support 12.2Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.
User must explicitly enable this feature.
Uses a non-standard name.
Uses a non-standard name.

See also