text-underline-offset

by

The text-underline-offset CSS property allows you to adjust the position of the underline relative to the text. This can enhance the visual appearance of underlined text by controlling how close or far the underline appears from the text itself.

Syntax

text-underline-offset: <length> | <percentage>;

<length>: Specifies the offset in pixels, centimeters, inches, etc. <percentage>: Sets the offset relative to the font size.

Values

  • Positive values: Move the underline downwards, creating more space between the text and the underline.
  • Negative values: Move the underline upwards, bringing it closer to the text.
  • Zero: Align the underline directly below the baseline of the text.

Example

<p>This is a paragraph with a text underline.</p>
p {
  text-decoration: underline;
  text-underline-offset: 2px; /* Move the underline 2 pixels downwards */
}

Key points

  • The text-underline-offset property works in conjunction with the text-decoration property, which specifies whether an underline should be displayed.
  • You can combine different values for text-underline-offset with other text decoration properties (e.g., text-decoration: underline overline) to create various effects.
  • Browser compatibility is generally good for modern browsers, but it’s always a good practice to check for support in older browsers.

Additional considerations

  • For more complex underline styles, consider using CSS custom properties or preprocessor variables to define the offset value and easily modify it across multiple elements.
  • If you need more precise control over the underline’s appearance, you might explore techniques like creating custom underline elements using pseudo-elements or SVG.

Live Demo

See the Pen text-underline-offset by Ballajack (@Ballajack) on CodePen.