Edit line thickness of CSS 'underline' attribute

html

responsive-design

css-properties

accessibility

byNikita Barsukov·Dec 17, 2024

For changing the underline thickness in CSS, use the border-bottom property or a background-image gradient. Here's a quick demonstration with border-bottom:

.thick-underline {
    text-decoration: none; /* Helps with handling  */
    border-bottom: 3px solid; /* Thickness is on you */
}

To implement this with an HTML element:

<span class="thick-underline">Your text. But underlined. Thicker.</span>

Analyzing `text-decoration` property

The native CSS text-decoration property is an all-star player in text decoration. It enables color, line, and style alterations to best suit your design needs.

Unraveling alternatives: Shadows and Pseudo-elements

Building with box-shadow

Creating lines using CSS box-shadow offering finer control:

.shadow-underline {
    text-decoration: none; /* Bye-bye, normal underline */
    box-shadow: 0px 1px 0px #000; /* Hello, new shadow underline */
}

Crafting with pseudo-elements

For advanced customization, the :after pseudo-element with absolute positioning is your best friend:

.custom-underline:after {
    content: '';
    position: absolute; /* We control the space now */
    left: 0;
    bottom: -5px; /* To avoid clashing with descenders */
    height: 3px; /* The thickness is up to you */
    width: 100%;
    background: currentColor;
}

Inline styles to the rescue

For varying underline in a text, go for inline CSS styles on span elements. To make it thick, do this:

<span style="text-decoration: underline; text-decoration-thickness: 2px;">Clearly underlined text</span>

Making your text interactive and accessible

User-friendly lines

For engaging user experience, try underlines that react to user actions:

.interactive-underline:hover {
    border-bottom: 3px solid transparent;
    text-decoration: underline;
    text-decoration-color: red; /* Bloody much */
    text-decoration-thickness: 3px; /* Thick enough yet? */
}

Don't forget about accessibility

Ensure underlines are user-friendly and readable. Thicker underlines should not hinder the text's descenders, and color contrasts should meet WCAG standards.