Codectionary / Developer documentation / CSS

Text Decoration Thickness and Offset

Text decoration properties control underline style, color, thickness, and offset. text-decoration-skip-ink lets underlines avoid letter descenders where supported. Underlines remain a valuable cue for links, especially when color differences alone are difficult to perceive.

Syntax

a { text-decoration-thickness: .12em; text-underline-offset: .2em; }

Examples

Text Decoration Thickness and Offset: working example

Run this CSS against the example’s own HTML. The explanation describes the expected result.

/* Neutral page for this self-contained document. */
body { color: #182338; background: #fff; }

a { color: #164eab; text-decoration-line: underline; text-decoration-thickness: .12em; text-underline-offset: .2em; text-decoration-skip-ink: auto; }
a:hover { text-decoration-style: double; }
  1. Expected result: The link has a thicker, offset underline that becomes double on hover.
  2. em-based measurements scale with the link’s font size.
  3. skip-ink can preserve readability around descenders such as g and y.
HTML used by this example

<p>Read the <a href="#guide">typography guide</a> for examples.</p><h2 id="guide">Typography guide</h2>

Best practices

  • Retain clear keyboard focus indicators alongside link decoration.
  • Check contrast for both text and meaningful decoration.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading