Thetext-decoration-insetCSS property enables adjusting the start and end points of an element's text decoration so it can be shortened, lengthened, or have its position shifted with respect to the rendered text.

Try it

text-decoration-inset: 20px;

text-decoration-inset: -0.5em;

text-decoration-inset: 20px 1em;

text-decoration-inset: -0.5rem -1.5rem;

text-decoration-inset: -2ex 10vw;

<section>  <p>Karmadrome</p></section>

#example-element {  font: 2.5em sans-serif;  text-decoration: underline 0.3em limegreen;}

Syntax

/* auto keyword */text-decoration-inset: auto;/* One <length> value */text-decoration-inset: 20px;text-decoration-inset: -2rem;/* Two <length> values */text-decoration-inset: 20px 1em;text-decoration-inset: -0.5rem -1.5rem;text-decoration-inset: -2ex 1vw;/* Global values */text-decoration-inset: inherit;text-decoration-inset: initial;text-decoration-inset: revert;text-decoration-inset: revert-layer;text-decoration-inset: unset;

Values

One or two<length> values, or the keywordauto.

<length>

Specifies the amount to adjust the text decoration position by. Positive values inset the text decoration (make it shorter) while negative values outset the text decoration (make it longer). If one value is specified, it applies to both the text decoration start and end points. If two values are specified, the first one applies to the text decoration start point and the second one applies to the text decoration end point.

auto

The browser chooses a start and end inset amount to ensure that, if two decorated text boxes appear side-by-side, the appearance of a gap is created between their text decorations so they do not appear to have a single text decoration.

Description

By default, an element's text decoration, as set by thetext-decoration shorthand and associated longhand properties, is the same size as the rendered text.

Thetext-decoration-inset property allows you to adjust the start and/or end points of a text container's text decoration. This is useful for creating effects where you want the text decoration to be inset or outset from the text itself, or shifted in position. SeeBasic use cases for an example of each.

A single<length> value will set the inset (if positive) or outset (if negative) on the start and end positions of the text decoration. To set the start and end positions separately, you can use two<length> values — the first one applies to the start position of the text decoration and the second one applies to the end.

Thetext-decoration-inset property can also take theauto keyword. This causes the browser to inset the text decoration start and end points to ensure that, if two decorated text boxes appear side-by-side, they do not appear to have a single text decoration. Theauto value is particularly important when rendering Chinese text, where underlining is used topunctuate proper nouns, and adjacent proper nouns should have separate underlines. SeeEffect of theauto value for an example.

Theauto value does not have the same effect as the initial value0. Settingtext-decoration-inset to0 causes there to be no space between decorations.

Thetext-decoration-inset property is not inherited, and it is not a constituent property of thetext-decoration shorthand.

Formal definition

Formal syntax

text-decoration-inset =
<length>{1,2}|
auto

Examples

Basic use cases

In this example, we demonstrate the outset, inset, and "shifted" use cases.

HTML

We define an unordered list with three list items, each with a separateid.

<ul>  <li>Outset decoration</li>  <li>Inset decoration</li>  <li>Shifted decoration</li></ul>

CSS

We give each list item a differenttext-decoration andtext-decoration-inset:

• The first one has a thick lime green underline, which is outset equally by10px on both sides.
• The second one has a medium thickness white strike-through, which is inset equally by0.5em on both sides.
• The third one has a thin wavy blue underline, which is moved to the right by1em.

li {  font-family: sans-serif;  font-size: 2em;  margin-bottom: 20px;}@supports not (text-decoration-inset: auto) {  body::before {    content: "Your browser doesn't support the text-decoration-inset property.";    background-color: wheat;    display: block;    padding: 10px 0;    width: 100%;    text-align: center;  }}

#one {  text-decoration: underline 0.3em limegreen;  text-decoration-inset: -10px;}#two {  text-decoration: line-through 5px white;  text-decoration-inset: 0.5em;}#three {  text-decoration: underline wavy 2px blue;  text-decoration-inset: 1em -1em;}

Result

This renders like so:

Effect of theauto value

This example demonstrates the effect of thetext-decoration-inset: auto value.

HTML

We define two groups of side-by-side<u> elements:

<p lang="zh"><u>石井</u><u>艾俐俐</u></p><p lang="zh"><u>石井</u><u>艾俐俐</u></p>

CSS

Each<u> element has ared color and3px thickness set on its underline. The first group of<u> elements has atext-decoration-inset value ofauto set on them, while the second set has the initialtext-decoration-inset value of0 explicitly set on them, for comparison purposes:

u {  font-family: sans-serif;  font-size: 2em;}@supports not (text-decoration-inset: auto) {  body::before {    content: "Your browser doesn't support the text-decoration-inset property.";    background-color: wheat;    display: block;    padding: 10px 0;    width: 100%;    text-align: center;  }}

u {  text-decoration-color: red;  text-decoration-thickness: 3px;}#one u {  text-decoration-inset: auto;}#two u {  text-decoration-inset: 0;}

Result

This renders like so:

Note how theauto value insets the text decoration subtly on both sides, creating a gap in between the underlines of the two elements (no space is added between the two elements themselves). The0 value results in no gap.

Specifications

Browser compatibility

See also

• text-decoration
• TheCSS text decoration module