- Services
- Case Studies
- Technologies
- NextJs development
- Flutter development
- NodeJs development
- ReactJs development
- About
- Contact
- Tools
- Blogs
- FAQ
CSS text-underline-offset Customize Text Underline
Explore available options like auto, length, and percentage values.
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:
Values
auto
: The browser decides the offset.<length>
: Specifies the offset using a length unit, likeem
orpx
.<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:
Examples
Basic Example
HTML
CSS
Multiple Text Decorations
HTML
CSS
Using Percentage Values
HTML
CSS
Combining with Other Text Properties
HTML
CSS
Browser Compatibility
Here’s the support for text-underline-offset
in major browsers:
Browser | Version | Support |
---|---|---|
Chrome | 87.0+ | Full Support |
Edge | 87.0+ | Full Support |
Firefox | 70.0+ | Full Support |
Opera | 73.0+ | Full Support |
Safari | 12.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:
Example:
text-decoration-line
The text-decoration-line
property specifies the type of text decoration line to be applied.
Syntax:
Example:
text-decoration-color
The text-decoration-color
property sets the color of the text decoration line.
Syntax:
Example:
text-decoration-style
The text-decoration-style
property defines the style of the text decoration line.
Syntax:
Example:
text-decoration-thickness
The text-decoration-thickness
property sets the thickness of the text decoration line.
Syntax:
Example:
Combining Properties
You can combine these properties to create highly customized text decorations that enhance the visual appeal of your web content.
Example:
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.
Talk with CEO
We'll be right here with you every step of the way.
We'll be here, prepared to commence this promising collaboration.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.