Styling Underlines Web

A complete guide to modern CSS text decoration techniques for beautiful, accessible, and performant underlines

The Foundation: Understanding CSS text-decoration

The text-decoration property is the cornerstone of underline styling in CSS. It is a shorthand property that combines several individual properties to give you precise control over how decorative lines appear on your text.

This comprehensive guide covers everything from basic syntax to advanced effects, helping you create visually appealing underlines that enhance your website's design while maintaining accessibility. Whether you're building a new site from scratch or refining existing styles, mastering these CSS techniques will elevate your web development projects with professional typography details.

Understanding how browsers render text decorations is essential for creating consistent cross-browser experiences. Modern CSS provides properties that were previously only achievable through workarounds or image-based solutions.

text-decoration Shorthand vs Longhand

1/* Shorthand approach */2h1 {3 text-decoration: underline solid blue 2px;4}5 6/* Longhand approach (equivalent) */7h1 {8 text-decoration-line: underline;9 text-decoration-style: solid;10 text-decoration-color: blue;11 text-decoration-thickness: 2px;12}

Key text-decoration Properties

Four individual properties that combine to form the powerful text-decoration shorthand

text-decoration-line

Controls the type of decoration: underline, overline, line-through, or blink

text-decoration-color

Sets the color of the decoration line independently from the text color

text-decoration-style

Defines the visual style: solid, double, dotted, dashed, or wavy

text-decoration-thickness

Controls the weight/thickness of the underline from auto to specific values

Advanced Underline Control: text-underline-offset

The text-underline-offset property gives you fine-grained control over the positioning of underlines, allowing you to create visual separation between the line and your text.

Values and Usage

auto: Browser chooses the appropriate offset
length: Fixed values (px, em, rem) for precise control
percentage: Relative to 1em in the element's font size

Using em units is particularly valuable because the offset scales proportionally with font size changes. This makes your CSS styling more responsive and maintainable across different screen sizes and user preferences.

text-underline-offset Values

1/* Browser default */2.link-default {3 text-underline-offset: auto;4}5 6/* Pixel offset */7.link-separated {8 text-underline-offset: 4px;9}10 11/* Relative to font size - scales with text */12.link-proportional {13 text-underline-offset: 0.15em;14}15 16/* Percentage (relative to 1em) */17.link-scaled {18 text-underline-offset: 20%;19}

Underline Styles: From Simple to Decorative

The text-decoration-style property offers five distinct styles to match any design aesthetic:

Style	Use Case
Solid	Default choice for links and primary content emphasis
Double	Adds sophistication for headings and blockquotes
Dotted	Common for secondary links or tooltip indicators
Dashed	Useful for placeholder or inactive links
Wavy	Ideal for spelling errors, warnings, or playful designs

Choosing the right underline style contributes to your overall design system and helps establish visual hierarchy across your content. Consistency in styling reinforces brand identity and improves user experience.

text-decoration-style Options

1.style-solid {2 text-decoration-style: solid;3}4 5.style-double {6 text-decoration-style: double;7}8 9.style-dotted {10 text-decoration-style: dotted;11}12 13.style-dashed {14 text-decoration-style: dashed;15}16 17.style-wavy {18 text-decoration-style: wavy;19}

Underline Color: Brand Expression and Contrast

The text-decoration-color property enables you to create underlines that either match your text color or stand out as a design element. This is particularly useful for:

Branding: Match underlines to your brand color palette
Emphasis: Draw attention to key phrases with contrasting colors
Visual hierarchy: Differentiate link states with color changes
Aesthetics: Create cohesive color schemes across your design

When customizing underline colors, ensure you maintain accessibility standards for contrast ratios. The styling checkboxes guide covers similar color customization principles for form elements.

Precise Thickness Control: text-decoration-thickness

Control the visual weight of your underlines to create subtle or bold effects. The from-font value uses the underline thickness specified in the font file, ensuring consistency with the typeface design.

Adjusting underline thickness helps establish visual hierarchy in your content. Thicker underlines work well for headings and important call-to-action elements, while thinner underlines maintain readability in body text and responsive layouts.

text-decoration-thickness Examples

1/* Browser default */2.thickness-auto {3 text-decoration-thickness: auto;4}5 6/* From font metrics */7.thickness-from-font {8 text-decoration-thickness: from-font;9}10 11/* Specific pixel values */12.thickness-thin {13 text-decoration-thickness: 1px;14}15 16.thickness-bold {17 text-decoration-thickness: 3px;18}19 20/* Relative to font size */21.thickness-proportional {22 text-decoration-thickness: 0.1em;23}

Creating Custom Animated Underline Effects

Combine multiple properties and CSS animations to create sophisticated interactive underline effects that enhance user experience. Animated underlines provide visual feedback for user interactions and can guide attention to clickable elements.

For smooth animations, use pseudo-elements with CSS transitions or keyframe animations. This approach offers more control than animating text-decoration properties directly and works consistently across modern CSS frameworks.

Animated Underline with CSS Pseudo-elements

1/* Animated underline on hover */2.link-animated {3 text-decoration: none;4 position: relative;5 color: #1e293b;6}7 8.link-animated::after {9 content: '';10 position: absolute;11 width: 100%;12 transform: scaleX(0);13 height: 2px;14 bottom: -4px;15 left: 0;16 background-color: #2563eb;17 transform-origin: bottom right;18 transition: transform 0.25s ease-out;19}20 21.link-animated:hover::after {22 transform: scaleX(1);23 transform-origin: bottom left;24}

Accessibility Best Practices

Maintain sufficient color contrast between underlines and backgrounds. Avoid removing underlines from links without providing alternative visual indicators. Test underlines at different text sizes and zoom levels to ensure readability for all users. Our [web development services](/services/web-development/) prioritize accessibility compliance in every project.

Putting It All Together: Practical Examples

Here are complete, production-ready examples combining all the properties covered in this guide. These patterns work well in modern Next.js applications and can be implemented as utility classes or component-scoped styles.

Consider creating a consistent set of underline utilities that match your design system. This approach ensures visual consistency across your site while making it easy to maintain and update styles globally.

Complete Modern Link and Heading Styles

1/* Modern, accessible link styling */2a {3 color: #2563eb;4 text-decoration: underline;5 text-decoration-color: currentColor;6 text-decoration-thickness: from-font;7 text-underline-offset: auto;8 transition: color 0.2s ease;9}10 11a:hover {12 color: #1d4ed8;13 text-underline-offset: 2px;14}15 16/* Custom section heading style */17.section-heading {18 color: #0f172a;19 text-decoration: underline;20 text-decoration-style: double;21 text-decoration-color: #2563eb;22 text-decoration-thickness: 3px;23 text-underline-offset: 0.2em;24}

Conclusion

Modern CSS provides a comprehensive toolkit for styling underlines that goes far beyond the basic browser defaults. By mastering properties like text-underline-offset, text-decoration-color, text-decoration-style, and text-decoration-thickness, you can create sophisticated, accessible, and performant underline effects that enhance your website's visual appeal.

Experiment with these techniques to find the right balance between aesthetics and usability for your specific design goals. For teams looking to implement consistent, professional typography across their digital presence, our web development experts can help establish and maintain design standards that elevate your brand.

Frequently Asked Questions

Ready to Enhance Your Web Development Skills?

Our team of expert developers can help you implement modern CSS techniques across your website.

Sources

MDN Web Docs: text-decoration property - The authoritative source for CSS text-decoration shorthand, combining line, color, style, and thickness properties.
MDN Web Docs: text-underline-offset property - Official reference for controlling underline distance from text using auto, length, or percentage values.
CSS Text Decoration Module Level 4 - W3C - The W3C specification that defines text decoration properties including underline offset and position.
Elementor: CSS Underline Styling Guide - Practical examples for color customization, styling techniques, and use cases for underlines in web design.