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
Example
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
Colored Line-Through
Custom Underline
Multiple Decorations
Styling Links
Emphasizing Headings
Full Example
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:
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
text-decoration-line
- Description: Specifies the type of line decoration (
underline
,overline
,line-through
, etc.). - MDN Documentation: [text-decoration-line]WebsiteUrl
- Description: Specifies the type of line decoration (
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
- Description: Defines the style of the line (
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
Related Topics
- CSS List Style Properties
- Description: Controls the appearance of items in HTML
<ol>
and<ul>
lists. - MDN Documentation: [list-style]WebsiteUrl
- Description: Controls the appearance of items in HTML
- CSS Animations
- Description: Allows for the animation of CSS properties, including text decorations.
- MDN Documentation: [CSS Animations]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.
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.