CSS text-underline-offset Customize Text Underline

Introduction

The text-underline-offset property in CSS lets you control the distance between an underline and the text. It’s useful for making your text look better and more readable. This property only affects underlined text, not other decorations like overline or line-through.

Specification

The text-underline-offset property is part of the CSS Text Decoration Module Level 4. This module defines how to enhance text decorations. For more details, you can check the official specification: CSS Text Decoration Module Level 4 - underline-offset.

Syntax

Here’s how you can use the text-underline-offset property:

/* Single keyword */
text-underline-offset: auto;

/* Length */
text-underline-offset: 0.1em;
text-underline-offset: 3px;

/* Percentage */
text-underline-offset: 20%;

/* Global values */
text-underline-offset: inherit;
text-underline-offset: initial;
text-underline-offset: revert;
text-underline-offset: revert-layer;
text-underline-offset: unset;

Values

• auto: The browser decides the offset.
• <length>: Specifies the offset using a length unit, like em or px.
• <percentage>: Sets the offset as a percentage of the font size.
• Global Values: inherit, initial, revert, revert-layer, unset.

Formal Definition

• Initial Value: auto
• Applies To: All elements and pseudo-elements like ::first-letter and ::first-line.
• Inherited: Yes
• Percentages: Based on the font size of the element.
• Computed Value: As specified
• Animation Type: By computed value type

Formal syntax:

text-underline-offset =
  auto                 [|]
  <length-percentage>

<length-percentage> =
  <length>            [|]
  <percentage>

Examples

Basic Example

HTML

<p class="basic-underline">This text has a custom underline offset.</p>

CSS

.basic-underline {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

Multiple Text Decorations

HTML

<p class="multiple-decorations">This text has multiple decorations, but only the underline is offset.</p>

CSS

.multiple-decorations {
  text-decoration: underline overline line-through;
  text-underline-offset: 0.3em;
}

Using Percentage Values

HTML

<p class="percentage-underline">This text has an underline offset set as a percentage.</p>

CSS

.percentage-underline {
  text-decoration: underline;
  text-underline-offset: 20%;
}

Combining with Other Text Properties

HTML

<p class="combined-effects">This text combines underline offset with other text properties.</p>

CSS

.combined-effects {
  text-decoration: underline;
  text-underline-offset: 0.5em;
  font-weight: bold;
  color: blue;
}

Browser Compatibility

Here’s the support for text-underline-offset in major browsers:

For the latest compatibility info, check Can I use.

Related CSS Properties

The text-underline-offset property is one of many CSS properties for customizing text decoration. Understanding these properties can help you create more visually appealing and functional text elements.

text-decoration

The text-decoration property is a shorthand for setting multiple text decoration values at once. It can add underlines, overlines, and line-through effects to your text.

Syntax:

text-decoration: none | [underline || overline || line-through || blink] || text-decoration-line text-decoration-color text-decoration-style text-decoration-thickness;

Example:

p {
  text-decoration: underline wavy red;
}

text-decoration-line

The text-decoration-line property specifies the type of text decoration line to be applied.

Syntax:

text-decoration-line: none | [underline || overline || line-through || blink];

Example:

p {
  text-decoration-line: underline overline;
}

text-decoration-color

The text-decoration-color property sets the color of the text decoration line.

Syntax:

text-decoration-color: <color>;

Example:

p {
  text-decoration-color: blue;
}

text-decoration-style

The text-decoration-style property defines the style of the text decoration line.

Syntax:

text-decoration-style: solid | double | dotted | dashed | wavy;

Example:

p {
  text-decoration-style: wavy;
}

text-decoration-thickness

The text-decoration-thickness property sets the thickness of the text decoration line.

Syntax:

text-decoration-thickness: auto | <length>;

Example:

p {
  text-decoration-thickness: 2px;
}

Combining Properties

You can combine these properties to create highly customized text decorations that enhance the visual appeal of your web content.

Example:

p {
  text-decoration-line: underline;
  text-decoration-color: green;
  text-decoration-style: wavy;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

Conclusion

Using related properties like text-decoration, text-decoration-line, text-decoration-color, text-decoration-style, and text-decoration-thickness in conjunction with text-underline-offset allows you to create visually appealing and functional text decorations. Understanding these properties and how to combine them effectively can significantly enhance the overall design and readability of your web content.

By leveraging these related properties, web developers can create custom text decorations that align with their design goals, improving the user experience and visual appeal of their websites.