Tillitsdone
down Scroll to discover

CSS text-underline-offset Customize Text Underline

Learn how to use the CSS text-underline-offset property to customize the distance of an underline from text.

Explore available options like auto, length, and percentage values.
thumbnail

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:

BrowserVersionSupport
Chrome87.0+Full Support
Edge87.0+Full Support
Firefox70.0+Full Support
Opera73.0+Full Support
Safari12.1+Full Support

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.

icons/css-4.svg CSS Blogs
CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.
icons/logo-tid.svg

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?
Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!
🖐️ Contact us
Let's keep in Touch
Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.
Contact Information
rick@tillitsdone.com+66824564755
Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.
Address
9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand
Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.
Social media
Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.
We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.
Frequently Asked Questions
Explore frequently asked questions about our products and services.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.