In CSS, adjusting the line thickness of an underline cannot be directly achieved using the text-decoration property, as it lacks native support for controlling line thickness. Instead, we can employ alternative techniques to achieve a similar effect.
Method 1: Using border-bottom
The simplest approach is to replace the underline with the border-bottom property. This allows precise control over line thickness, style, and color.
.underline { text-decoration: none; border-bottom: 2px solid black; /* Set line thickness to 2px and color to black */ }
Method 2: Using text-decoration and text-decoration-thickness
Starting with CSS Text Decoration Module Level 4, the text-decoration-thickness property enables direct control over the thickness of underlines, overlines, or strikethroughs. Note that this property may not be supported in older browsers.
.underline { text-decoration: underline; text-decoration-color: black; /* Set color */ text-decoration-style: solid; /* Set style */ text-decoration-thickness: 2px; /* Control line thickness */ }
Method 3: Using box-shadow
Another technique involves using the box-shadow property to simulate an underline. This method excels at creating multi-layer shadow effects but is primarily suited for simple lines.
.underline { text-decoration: none; box-shadow: 0px 1px 0px 0px black; /* x-offset, y-offset, blur radius, spread radius, and color */ }
Example Application
Suppose we want to add a custom-thickness underline to specific text on a webpage. Method 2 is recommended as it provides a standardized approach for setting line thickness while ensuring compatibility with modern browsers.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Custom Underline Example</title> <style> .custom-underline { text-decoration: underline; text-decoration-color: blue; text-decoration-style: solid; text-decoration-thickness: 4px; } </style> </head> <body> <p class="custom-underline">This is an example of text with a custom underline thickness.</p> </body> </html>
The above example renders a text paragraph with a blue underline of 4px thickness. This effect enhances visual prominence and design appeal.