rick@tillitsdone.com

+66824564755

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.

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

text-decoration-line: Specifies the type of line decoration (underline, overline, line-through, etc.).
text-decoration-color: Sets the color of the decorative line.
text-decoration-style: Defines the style of the line (solid, dashed, dotted, double, wavy).
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

Related CSS Properties

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

Additional Text Decoration Properties

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
text-underline-offset
- Description: Specifies the offset distance of the underline from the text.
- MDN Documentation: [text-underline-offset]WebsiteUrl
text-underline-position
- Description: Defines the position of the underline relative to the text.
- MDN Documentation: [text-underline-position]WebsiteUrl

Useful Resources

MDN Web Docs
- Description: Provides comprehensive documentation on CSS properties, including detailed explanations and examples.
- Link: [MDN Web Docs CSS]WebsiteUrl
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
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.

CSS Blogs

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

CSS property CSS animation

css_property_cover/css-property-text-decoration-line.png

CSS text-decoration-line Enhancing Text Styles Learn how to use CSS text-decoration-line to add underline, overline, and line-through to your text. Discover available options and their uses.

css_property_cover/css-property-text-underline-offset.png

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.

css_property_cover/css-property-border-block-end-style.png

CSS Border-Block-End-Style Control Logical Block-End Border Learn about the CSS border-block-end-style property that controls the style of the logical block-end border of an element. Discover available options like none, solid, dashed, and more.

css_property_cover/css-property-border-block-start.png

CSS Border-Block-Start Simplified Border Styling CSS border-block-start is a versatile property for setting block-start border styles in a single declaration. Use it to simplify border definitions, adaptable to various writing modes and text orientations. Options include width, style, and color.

css_property_cover/css-property-border-bottom-color.png

CSS Border-Bottom-Color Customize Bottom Border Colors CSS border-bottom-color sets the color of an element's bottom border. Use named colors, hexadecimal values, RGB, RGBA, HSL, or HSLA to customize the appearance. Learn about syntax, values, and examples.

css_property_cover/css-property-border-inline-color.png

CSS Border-Inline-Color Simplifying Border Styling Learn about the CSS border-inline-color property, which simplifies border styling by setting inline border colors based on writing mode and directionality. Discover available options for this powerful tool.

View all 337 CSS blogs

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

Explore our best articles, cover a wide variety of technologies

Our knowledge base

UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

150 Articles

Explore

Nodejs

JavaScript runtime for building scalable, high-performance server-side applications.

60 Articles

Explore

Nextjs

React framework enabling server-side rendering and static site generation for optimized performance.

40 Articles

Explore

Typescript

Superset of JavaScript adding static types for improved code quality and maintainability.

39 Articles

Explore

TailwindCSS

Utility-first CSS framework for rapid UI development.

130 Articles

Explore

Golang

Programming language known for its simplicity, concurrency model, and performance.

70 Articles

Explore

AstroJs

Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.

40 Articles

Explore

Jest

Versatile testing framework for JavaScript applications supporting various test types.

337 Articles

Explore

CSS

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

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

Facebook Instagram LinkedIn

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.

DesignRush
web design companies

Goodfirms

CSS Text-Decoration Enhance Your Web Design

Formal Definition

Key Properties

Syntax

Example

Global Values

Examples

Simple Underline

Colored Line-Through

Custom Underline

Multiple Decorations

Styling Links

Emphasizing Headings

Full Example

Browser Compatibility

Supported Browsers

Constituent Properties Compatibility

Browser-Specific Notes

Example Code for Cross-Browser Compatibility

Testing Browser Compatibility

Additional Resources

See Also

Related CSS Properties

Additional Text Decoration Properties

Related Topics

Useful Resources

Conclusion

Talk with CEO