CSS Underline on Hover

Understanding CSS Text-Decoration

The CSS text-decoration property family provides the building blocks for all underline styling. Understanding these properties is essential before implementing hover effects.

The text-decoration Shorthand

The text-decoration property is a shorthand that combines four individual properties into a single declaration. As documented by MDN Web Docs, it sets the appearance of decorative lines on text, including underline, overline, and line-through decorations.

The shorthand syntax accepts values for line, color, style, and thickness in any order. For hover underlines, you can combine these properties to create custom effects:

/* Basic underline */
a {
 text-decoration: underline;
}

/* Styled underline with color and style */
a {
 text-decoration: underline solid #007bff;
}

/* Complete decoration specification */
a {
 text-decoration: underline wavy 2px #ff6b6b;
}

Key Properties:

• text-decoration-line: The type of decoration (underline, overline, line-through)
• text-decoration-color: The color of the decoration
• text-decoration-style: The style of the line (solid, dashed, dotted, double, wavy)
• text-decoration-thickness: The thickness of the line

For developers working with modern CSS layouts, understanding how these properties interact with other CSS features like CSS Grid and CSS variables creates more cohesive and maintainable designs.

Modern Underline Positioning

Two additional properties revolutionized CSS underline customization: text-underline-offset and text-underline-position.

text-underline-offset controls the distance between the underline and the text baseline. Positive values move the underline further from the text, solving the problem of underlines cutting through descenders in letters like g, j, p, q, and y, as documented by MDN's text-underline-offset guide.

text-underline-position specifies where the underline is positioned relative to the text. The under value positions the underline below the baseline, providing excellent readability for text with descenders.

/* Modern underline positioning */
a {
 text-decoration: underline;
 text-underline-offset: 4px;
 text-underline-position: under;
}

These modern CSS properties work seamlessly with animation techniques, allowing developers to create polished CSS loading animations and other interactive elements that maintain visual consistency.

Creating Animated Underline Hover Effects

The pseudo-element technique creates sophisticated animated underlines using ::before or ::after pseudo-elements. This approach separates the underline from the text decoration system, enabling precise control over animation, positioning, and appearance, as demonstrated in Prismic's CSS hover effects guide.

Slide-In Underline Effect

A popular animated underline effect slides in from left to right on hover. The technique works by creating a pseudo-element that starts at zero width and expands to full width on hover. The transition property ensures smooth animation, as shown in HubSpot's CSS underline tutorial.

The key is positioning the pseudo-element absolutely relative to the parent, setting an initial width of 0, then animating to 100% on hover. Using currentColor for the background color ensures the underline matches the text color automatically.

For developers implementing comprehensive design systems, these hover techniques complement responsive website templates and ensure consistent user interactions across different devices.

Expanding Center-out Underline

For an underline that expands from the center outward, the technique changes slightly. Instead of animating width from 0 to 100%, we animate scaleX from 0 to 1 while centering the transform origin. This creates an elegant effect where the underline grows from the middle of the link outward to both ends.

The key modifications include setting left: 50% and transform: translateX(-50%) to center the pseudo-element, then using transform-origin: center so the scale animation expands bidirectionally.

/* Center-out expansion */
.hover-underline-center {
 position: relative;
 text-decoration: none;
}

.hover-underline-center::after {
 content: '';
 position: absolute;
 width: 100%;
 height: 2px;
 bottom: -2px;
 left: 50%;
 background-color: currentColor;
 transform: translateX(-50%) scaleX(0);
 transform-origin: center;
 transition: transform 0.3s ease;
}

.hover-underline-center:hover::after {
 transform: translateX(-50%) scaleX(1);
}

Animated Wavy Underline

The wavy text-decoration-style combined with pseudo-element animation creates distinctive effects. The CSS wavy style produces an organic, hand-drawn appearance popular in modern designs, as documented in MDN's text-decoration reference. Combining this with pseudo-element techniques allows for animated wavy underlines that catch the eye without sacrificing performance.

/* Wavy animated underline */
.wavy-underline {
 position: relative;
 text-decoration: none;
}

.wavy-underline::after {
 content: '';
 position: absolute;
 width: 100%;
 height: 3px;
 bottom: -4px;
 left: 0;
 background: linear-gradient(90deg, #667eea, #764ba2);
 border-radius: 3px;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.wavy-underline:hover::after {
 opacity: 1;
}

.wavy-underline:hover {
 text-decoration: wavy underline #667eea;
 text-decoration-thickness: 3px;
 text-underline-offset: 4px;
}

Performance Considerations

CSS hover effects, while visually appealing, can impact rendering performance if implemented carelessly. Each property change that triggers a repaint or reflow affects the browser's rendering pipeline, as explained in HubSpot's CSS underline guide.

Properties That Trigger Layout

• width, height - Dimension changes affect layout and trigger reflows
• margin, padding - Spacing changes affect layout and trigger reflows
• left, top - Position changes affect layout and trigger reflows

GPU-Accelerated Properties

Modern browsers can offload certain CSS properties to the GPU for smoother animations:

• transform - Uses GPU compositing, doesn't trigger reflows
• opacity - Uses GPU compositing, highly performant
• filter - Modern browsers can GPU-accelerate filters

Performance-Optimized Approach

For animated underlines, prefer transform and opacity changes over properties that trigger layouts. The will-change property signals to the browser that an element will animate, allowing optimization, but should be used sparingly to avoid memory overhead, as recommended in Prismic's CSS hover effects article.

Accessibility Considerations

Motion Sensitivity

Users with vestibular disorders may experience discomfort from animations. Respect reduced motion preferences:

@media (prefers-reduced-motion: reduce) {
 .animated-underline {
 transition: none;
 }
 
 .animated-underline::after {
 width: 100%;
 }
}

Focus States

Hover effects must not compromise keyboard navigation. Ensure focus states are equally visible:

.hover-underline:focus {
 outline: 2px solid currentColor;
 outline-offset: 2px;
}

.hover-underline:hover,
.hover-underline:focus {
 text-decoration: underline;
}

Color Contrast

Underline colors must meet WCAG contrast requirements against the background. Ensure adequate contrast for users with visual impairments.

Building accessible web experiences with proper hover and focus states is essential for any web development project. These principles ensure your website serves all users effectively while maintaining professional design standards.

Sources

1. MDN Web Docs - text-decoration - The authoritative CSS reference for text-decoration properties
2. MDN Web Docs - text-underline-offset - Documentation for the modern underline offset property
3. Prismic - CSS Hover Effects - Animated underline techniques using pseudo-elements
4. HubSpot Blog - CSS Underline on Hover - Best practices for interactive underlines