Tillitsdone
down Scroll to discover
CSS Text-Decoration Enhance Your Web Design
Learn how to use CSS text-decoration to enhance your web design.

Discover available options like underline, overline, line-through, and more.
thumbnail

Formal Definition

The text-decoration property in CSS is a shorthand that combines several other properties to add decorative lines to text. These lines can be underlines, overlines, or line-throughs, and you can customize their color, style, and thickness.

Key Properties

  1. text-decoration-line: Specifies the type of line decoration (underline, overline, line-through, etc.).
  2. text-decoration-color: Sets the color of the decorative line.
  3. text-decoration-style: Defines the style of the line (solid, dashed, dotted, double, wavy).
  4. text-decoration-thickness: Determines the thickness of the line (in pixels, percentages, etc.).

Syntax

text-decoration: [text-decoration-line] [text-decoration-style] [text-decoration-color] [text-decoration-thickness] | initial | inherit;

Example

.underline-text {
text-decoration: underline dashed red 2px;
}

In this example, the text will have a dashed red underline that is 2 pixels thick.

Global Values

  • initial: Sets the property to its default value.
  • inherit: Inherits the value from its parent element.
  • unset: Resets the property to its natural value.
  • revert: Reverts the property to the default value as specified by the browser.
  • revert-layer: Reverts the property to the value established by the originating layer.

Examples

Simple Underline

<!DOCTYPE html>
<html>
<head>
<style>
.underline {
text-decoration: underline;
}
</style>
</head>
<body>
<p class="underline">This text has a simple underline.</p>
</body>
</html>

Colored Line-Through

<!DOCTYPE html>
<html>
<head>
<style>
.line-through {
text-decoration: line-through red;
}
</style>
</head>
<body>
<p class="line-through">This text has a red line-through.</p>
</body>
</html>

Custom Underline

<!DOCTYPE html>
<html>
<head>
<style>
.custom-underline {
text-decoration: underline dashed green 2px;
}
</style>
</head>
<body>
<p class="custom-underline">This text has a green dashed underline.</p>
</body>
</html>

Multiple Decorations

<!DOCTYPE html>
<html>
<head>
<style>
.multiple-decorations {
text-decoration: underline overline wavy blue 3px;
}
</style>
</head>
<body>
<p class="multiple-decorations">This text has both underline and overline.</p>
</body>
</html>

Styling Links

<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
color: blue;
}
a:hover {
text-decoration: underline solid blue 1px;
}
</style>
</head>
<body>
<p>Hover over <a href="#">this link</a> to see the underline effect.</p>
</body>
</html>

Emphasizing Headings

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-decoration: overline double black 4px;
}
</style>
</head>
<body>
<h1>This heading has a double black overline.</h1>
</body>
</html>

Full Example

<!DOCTYPE html>
<html>
<head>
<title>Text Decoration Examples</title>
<style>
.simple-underline {
text-decoration: underline;
}
.colored-line-through {
text-decoration: line-through red;
}
.custom-underline {
text-decoration: underline dashed green 2px;
}
.multiple-decorations {
text-decoration: underline overline wavy blue 3px;
}
a {
text-decoration: none;
color: blue;
}
a:hover {
text-decoration: underline solid blue 1px;
}
h1 {
text-decoration: overline double black 4px;
}
</style>
</head>
<body>
<p class="simple-underline">This text has a simple underline.</p>
<p class="colored-line-through">This text has a red line-through.</p>
<p class="custom-underline">This text has a green dashed underline.</p>
<p class="multiple-decorations">This text has both underline and overline.</p>
<p>Hover over <a href="#">this link</a> to see the underline effect.</p>
<h1>This heading has a double black overline.</h1>
</body>
</html>

Browser Compatibility

Browser compatibility is key when using the text-decoration property in CSS. Ensuring your text decorations work consistently across different browsers is crucial for a seamless user experience. Regular testing and using vendor prefixes and fallbacks help achieve cross-browser compatibility.

Supported Browsers

The text-decoration property is widely supported across modern browsers:

  • Google Chrome: Full support.
  • Mozilla Firefox: Full support.
  • Microsoft Edge: Full support.
  • Internet Explorer: Partial support, may not work as expected in older versions.
  • Safari: Full support.
  • Opera: Full support.

Constituent Properties Compatibility

The constituent properties of the text-decoration shorthand are also well-supported:

  • text-decoration-line: Widely supported.
  • text-decoration-color: Widely supported.
  • text-decoration-style: Widely supported.
  • text-decoration-thickness: Supported in modern browsers, may require prefixes.

Browser-Specific Notes

  • Internet Explorer: Older versions may not fully support all features. Test thoroughly if you need to support them.
  • Safari: Good support, but some advanced features may require vendor prefixes.
  • Opera: Full support, but older versions may have limited support.

Example Code for Cross-Browser Compatibility

To ensure cross-browser compatibility, use vendor prefixes and fallbacks:

<!DOCTYPE html>
<html>
<head>
<title>Cross-Browser Text Decoration Example</title>
<style>
.custom-underline {
text-decoration: underline; /* Fallback for older browsers */
text-decoration: underline dashed green 2px; /* Modern browsers */
-webkit-text-decoration: underline dashed green 2px; /* Safari */
-moz-text-decoration: underline dashed green 2px; /* Firefox */
}
</style>
</head>
<body>
<p class="custom-underline">This text has a dashed green underline with a thickness of 2 pixels.</p>
</body>
</html>

Testing Browser Compatibility

Use tools like BrowserStack or CrossBrowserTesting to test your website on multiple browsers and devices.

Additional Resources

For detailed browser compatibility information, check these resources:

  • [Can I use… text-decoration]WebsiteUrl
  • [MDN Web Docs: text-decoration]WebsiteUrl

See Also

For further exploration and understanding of the text-decoration property and related topics, consider checking out the following resources and related properties:

Related CSS Properties

  1. text-decoration-line
    • Description: Specifies the type of line decoration (underline, overline, line-through, etc.).
    • MDN Documentation: [text-decoration-line]WebsiteUrl
  2. text-decoration-color
    • Description: Sets the color of the decorative line.
    • MDN Documentation: [text-decoration-color]WebsiteUrl
  3. text-decoration-style
    • Description: Defines the style of the line (solid, dashed, dotted, double, wavy).
    • MDN Documentation: [text-decoration-style]WebsiteUrl
  4. text-decoration-thickness
    • Description: Determines the thickness of the line (in pixels, percentages, etc.).
    • MDN Documentation: [text-decoration-thickness]WebsiteUrl

Additional Text Decoration Properties

  1. text-decoration-skip-ink
    • Description: Controls whether the text decoration line should skip over the “ink” (the text itself) or not.
    • MDN Documentation: [text-decoration-skip-ink]WebsiteUrl
  2. text-underline-offset
    • Description: Specifies the offset distance of the underline from the text.
    • MDN Documentation: [text-underline-offset]WebsiteUrl
  3. text-underline-position
    • Description: Defines the position of the underline relative to the text.
    • MDN Documentation: [text-underline-position]WebsiteUrl

Related Topics

  1. CSS List Style Properties
    • Description: Controls the appearance of items in HTML <ol> and <ul> lists.
    • MDN Documentation: [list-style]WebsiteUrl
  2. CSS Animations
    • Description: Allows for the animation of CSS properties, including text decorations.
    • MDN Documentation: [CSS Animations]WebsiteUrl

Useful Resources

  1. MDN Web Docs
    • Description: Provides comprehensive documentation on CSS properties, including detailed explanations and examples.
    • Link: [MDN Web Docs CSS]WebsiteUrl
  2. Can I use…
    • Description: Offers up-to-date browser compatibility tables for CSS properties, helping you understand which features are supported in different browsers.
    • Link: [Can I use… text-decoration]WebsiteUrl
  3. CSS-Tricks
    • Description: A popular resource for learning CSS, including articles, guides, and tutorials on various CSS properties and techniques.
    • Link: [CSS-Tricks]WebsiteUrl

Conclusion

The text-decoration property in CSS is a powerful tool for enhancing the visual presentation of text. By understanding and utilizing the related CSS properties and resources, you can create visually appealing and user-friendly web designs. Exploring these additional properties and resources will help you master the art of text decoration and improve the overall quality of your web projects.

Get 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.