Underline styling CSS is the set of properties web developers use to control how underlined text looks in a browser, from the simple line under a link to a custom coloured, offset, or animated underline. If you search for underline styling CSS, you probably want more than the default browser underline, which can cut through descenders, sit too close to the text, or clash with your design. Modern CSS gives you precise control over line thickness, colour, position, and style, and it also lets you build decorative underlines with background gradients and borders for headings and highlights.
Underline Styling CSS Basics
The starting point for underline styling CSS is the text-decoration property, which combines line, style, colour, and thickness in one shorthand. Writing text-decoration underline gives you a basic line, while text-decoration underline solid blue adds a colour, and text-decoration underline wavy red adds a playful style. Older code often used the underline element or a border, but the modern text-decoration properties are cleaner because they follow the text naturally across line breaks and respond to font size changes without extra markup. For most links and headings, these properties are all you need.
Three longhand properties give you finer control. The property text-decoration-color sets the line colour independently of the text colour, so you can keep dark text with a bright accent line. The property text-decoration-thickness sets how heavy the line looks, using values such as thin, medium, thick, or a length like 2px. The property text-underline-offset sets the gap between the text and the line, which is the single biggest improvement for readability, because a small offset stops the line from striking through letters like g, p, and y. Together, these properties turn a plain underline into a deliberate design choice.
Default Browser Underlines Versus Custom Styles
Browsers underline links by default, but the default line is drawn close to the text and often crosses descenders, which can look messy at large sizes. A custom style with a modest offset, a slightly thinner line, and a colour that matches your palette looks more polished and stays readable. Accessibility matters here too: never rely on colour alone to show a link, and keep the underline visible for links inside paragraphs, because removing underlines entirely can make links hard to spot for many readers. A good rule is to style the underline, not to delete it without a clear alternative such as a button shape or a strong colour contrast plus a hover effect.
Underline Styling CSS Properties in Detail
Let us walk through the key properties one by one. The text-decoration-line property chooses which lines appear: underline, overline, line-through, or none, and you can combine values where it makes sense. The text-decoration-style property chooses the line pattern: solid, double, dotted, dashed, or wavy, with wavy working best for playful or editorial designs rather than body links. The text-decoration-skip-ink property, supported in modern browsers, tells the browser to skip the line around descenders, which is a small detail that makes a large difference to how professional a paragraph looks.
Thickness and offset deserve extra attention because they interact with font size. A fixed thickness of 1px can look fine at small sizes but thin at large heading sizes, so many designers use relative units such as em values that scale with the text. An offset of around 0.2em to 0.3em usually looks comfortable for body text, while headings can take a larger offset for a more open feel. Test your choices at several sizes and on mobile widths, because an underline that looks elegant on a desktop heading can look cramped or faint on a small phone screen. For related text formatting ideas, see this guide to colour and background for text and this explainer on asterisk and text symbols.
| Property | What it controls | Example value |
|---|---|---|
| text-decoration-line | Which line appears | underline |
| text-decoration-style | Line pattern | solid, dashed, wavy |
| text-decoration-color | Line colour | currentColor or a named colour |
| text-decoration-thickness | Line weight | 2px or 0.1em |
| text-underline-offset | Gap below text | 0.25em |
| text-decoration-skip-ink | Skipping descenders | auto |
Custom Underline Effects Beyond the Basics
When the built-in properties are not enough, developers build underlines with background gradients or borders. A background gradient underline can create a highlight effect, where a soft colour band sits behind the lower part of the text, or a sliding effect, where the line grows from left to right on hover. A border-bottom underline is simpler and works well for navigation items and headings, because it gives you full control over spacing with padding, although it does not wrap as gracefully across multiple lines of text. Choosing between these techniques depends on whether your text wraps, whether you need animation, and how much browser support you must maintain.
Hover effects are the most popular custom use. A common pattern keeps a link unobtrusive by default, then reveals or thickens the underline when the pointer hovers over it, which signals interactivity without cluttering the page. Another pattern animates a line growing from the centre or from one side, which suits navigation menus and call-to-action links. Keep animations subtle and fast, respect users who prefer reduced motion, and always keep a non-hover state that still identifies the link clearly, because touch devices have no hover and keyboard users navigate with focus styles instead.
A Practical Code Example
Here is a compact example that shows the modern approach in action. The code sets a coloured underline, a comfortable offset, and a thickness that scales with the text, then thickens the line slightly on hover for feedback. You can paste this pattern into a stylesheet and adjust the colour and offset to match your own design, and it will work for links inside paragraphs as well as for standalone headings. The key lesson is to treat the underline as part of typography, with the same care you give to font size and line height, rather than as an afterthought added at the end of a project.
For a link style, a typical rule might read: a custom class with text-decoration underline, a chosen colour, a thickness of 2px, and an offset of 3px, plus a hover rule that increases thickness. For a heading highlight, a background gradient with a transparent top portion and a coloured bottom band can create a marker-pen effect that sits behind the text. Both patterns are widely used, both are easy to maintain, and both avoid the old habit of wrapping text in presentational markup that mixes content with styling.
Accessibility and Best Practices for Underlines
Good underline practice is also good accessibility practice. Keep underlines for links and for genuinely emphasised text, and avoid underlining ordinary words that are not clickable, because readers may try to click them and feel confused. Make sure the contrast between the underline colour and the background is strong enough to see, and do not make the line so thin that it disappears on low-resolution screens. When you style focus states for keyboard users, keep the underline or add a visible outline, so that tabbing through a page shows clearly which link is active.
Performance and maintenance matter as well. Prefer the native text-decoration properties over complex background tricks where they do the job, because native underlines are simpler, wrap correctly, and need less code to maintain. Reserve gradient and border techniques for headings, navigation, and special highlights where the extra control earns its complexity. Document your underline choices in a small style guide note, including colour, thickness, and offset values, so that future pages stay consistent without every developer reinventing the same effect.
FAQs: Underline Styling CSS
How do I move an underline further from the text?
Use the text-underline-offset property with a value such as 0.25em or 4px. A larger offset improves readability, especially for text with descenders, but avoid pushing the line so far that it looks detached from the words.
Can the underline be a different colour from the text?
Yes, the text-decoration-color property sets the line colour independently. You can use a named colour, a hex value, or currentColor to match the text colour exactly.
Should I remove underlines from links?
Generally no for links inside paragraphs, because the underline is a strong, familiar signal that text is clickable. If you remove it, provide another clear signal, such as a button style or a distinct colour plus a hover and focus treatment.
Underline Styling CSS for Responsive Layouts
Responsive design changes how underline styling CSS should be set, because the same text appears at very different sizes on a phone and on a desktop monitor. A thickness that looks bold on a large heading can look heavy on a small screen, and an offset that feels generous on desktop can feel detached on mobile, so test underline styling CSS at several viewport widths rather than trusting a single preview. Relative units help here: an offset in em units scales with the font size, and a thickness in em units keeps the line proportionate as headings shrink. If you use fixed pixel values, check them at the smallest size your site supports, and adjust the mobile rules separately when the default does not hold up.
Another responsive point for underline styling CSS is line wrapping in narrow columns, where a long link may break across two or three lines. Native text-decoration underlines handle wrapping gracefully, following each line of text, while border-based underlines only sit under the whole block and can look wrong on wrapped text. That is one more reason to prefer underline styling CSS properties for body links and reserve border tricks for short, single-line headings and navigation items. When you combine responsive testing with the native properties, underline styling CSS stays readable, consistent, and easy to maintain across every device your readers use.
Underline Styling CSS: A Quick Check
Before you publish, run this quick check for underline styling CSS: is the underline styling CSS colour visible against the background, is the underline styling CSS offset comfortable for descenders, and does the underline styling CSS thickness suit the font size? If underline styling CSS passes all three checks, your links will read clearly on desktop and mobile alike.
Conclusion: Underline Styling CSS Done Well
In summary, underline styling CSS gives you everything from a simple link line to a polished, branded highlight, and the modern properties make the work far easier than it used to be. Start with text-decoration and its longhand properties, set a thoughtful colour, thickness, and offset, let the browser skip descenders, and add custom gradient or border effects only where they earn their place. With those habits, your underlines will support readability and design instead of fighting them.
