Underline offset

Set the underline offset in whole pixels or as an arbitrary nonnegative length.

Move an existing underline away from or toward the text. The offset affects underline placement, not whether an underline is drawn.

Quick reference

Example class	Expected declarations
`underline-offset-4`	`text-underline-offset: 4px;`
`underline-offset-[0.15em]`	`text-underline-offset: 0.15em;`

Example setup

The shared preview base explicitly selects spec 1, reset none, strict mode, spacingUnit 0.25rem, and no breakpoints. These links use their browser-provided underline so the example isolates text-underline-offset. wind-demo only styles the container and link color.

Examples in use

Compare fixed and relative offsets

The first links use pixel offsets; the last uses em so its distance follows the text size.

Compare fixed and relative offsets

HTML

<div class="wind-demo-offsets">
  <p><a href="#offset-2" class="underline-offset-2">Two pixels / 2px</a></p>
  <p><a href="#offset-4" class="underline-offset-4">Four pixels / 4px</a></p>
  <p><a href="#offset-em" class="underline-offset-[0.15em]">Relative to text size / 文字サイズに応じた長さ</a></p>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-offsets {
  color: #223247;
  border: 1px solid #b7c5d4;
  padding: .6rem 1rem;
}

.wind-demo-offsets p {
  margin: 0;
  padding: .45rem 0;
  border-bottom: 1px solid #d8e0e8;
}

.wind-demo-offsets p:last-child {
  border-bottom: 0;
}

.wind-demo-offsets a {
  color: inherit;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.underline-offset-\[0\.15em\] {
  text-underline-offset: 0.15em;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-offsets": true
    },
    "safelist": {
      "docs-preview": [
        "underline-offset-2",
        "underline-offset-4",
        "underline-offset-[0.15em]"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo-offsets { color: #223247; border: 1px solid #b7c5d4; padding: 0.6rem 1rem; }
.wind-demo-offsets p { margin: 0; padding: 0.45rem 0; border-bottom: 1px solid #d8e0e8; }
.wind-demo-offsets p:last-child { border-bottom: 0; }
.wind-demo-offsets a { color: inherit; }

Custom and named values

An integer suffix such as underline-offset-4 means 4px. Arbitrary bracket values can use supported nonnegative lengths such as underline-offset-[0.15em], which scales with the font size. The catalog does not define named offset tokens, percentages, negative values, or an auto keyword for this family. Keep enough distance for the underline to remain associated with the text.

Related guides: Utility grammar · Variants

Catalog details