🔗
Links that still look clickable
Use underline thickness and offset to keep links obvious without the cramped, default-browser feel.
Controls
Keep your core text readable while dialing in decoration style and spacing.
#e94560
Tip: decoration is part of UX, not just styling. Offset and thickness can materially improve readability, especially on bold headings, nav links, and CTA text.
Preview
Use the live sample to spot collisions between the underline and your glyph shapes.
The quick brown fox jumps over the lazy dog
Generated CSS
Need conversion-focused content around your design system, landing page, or creator workflow? Start with the Content Creator Toolkit.
Use Cases
Where CSS text-decoration actually helps
Most teams underuse text-decoration. It is useful far beyond default browser underlines when you need clearer affordance, stronger emphasis, and a cleaner editorial rhythm.
🛍️
Promo and CTA accents
Add wavy or double decoration to pricing notes, limited offers, and launch copy without relying only on color.
📰
Editorial and blog styling
Different decoration styles can separate quotes, annotations, corrections, and section labels in content-heavy pages.
🧭
Navigation and state feedback
Use decoration for active tabs, hover states, filters, and onboarding UI where spacing matters more than heavy borders.
Text Decoration Workflow
A fast frontend workflow from idea to shipped CSS
This page is best used as a quick design-to-code step in your frontend workflow, especially when polishing marketing pages and content interfaces.
1
Choose the semantic job
Start by deciding whether the text needs to signal interactivity, emphasis, editorial meaning, or state.
2
Match style to content density
Use solid or double for UI, dotted or dashed for annotations, and wavy for playful or cautionary emphasis.
3
Balance offset and thickness
Adjust spacing until the decoration stops touching descenders and still reads well at your target font size.
4
Copy, test, and ship
Paste the CSS into your component, then verify hover, dark mode, accessibility, and mobile rendering before publishing.
Want the content side handled too?
Once your UI styling is ready, use the Content Creator Toolkit to produce launch copy, landing page sections, blog posts, email promos, and repurposed social content around the same asset.
Best Practices
Make decorative text styling feel intentional, not noisy
The best text-decoration choices usually come from restraint. These guidelines keep the UI polished and easier to read.
Keep link affordance strong
- Do not remove underlines from body-copy links unless another clear affordance replaces them.
- Use thicker underlines for small text to preserve visibility on lower-quality displays.
Respect font anatomy
- Increase
text-underline-offsetwhen letters like g, j, p, q, and y feel crowded. - Check bold weights separately because the same offset rarely works across all font weights.
Use color with purpose
- Decoration color should support meaning or hierarchy, not just decoration for decoration’s sake.
- On dark UIs, verify contrast between text, decoration, and background under hover and focus states.
FAQ
Common questions about CSS text decoration
Short answers for the implementation questions that usually come up when designers and developers refine text styling.
What is text-decoration used for in CSS?
It controls visual lines attached to text, such as underline, overline, and line-through. With newer properties, you can also tune style, color, thickness, and underline offset for more polished UI states.
Why use text-underline-offset?
Offset gives the underline breathing room. That improves readability, especially with larger headings, bold fonts, or typefaces with deep descenders.
Should I use wavy or dotted underlines in production?
Yes, but sparingly. They work best for annotations, hover accents, playful brand moments, or editorial UI. For standard links and navigation, solid lines are usually safer and clearer.
Can I combine multiple text-decoration lines?
Yes. This tool supports underline, overline, and line-through together. Just make sure the result still communicates meaning clearly and does not make the text feel cluttered.
Next Steps
Turn styling work into a publishable page faster
Once your CSS is dialed in, move directly into content and page assembly instead of context switching across tools.
Primary CTA: move from styling to conversion
If you are building creator pages, product promos, or portfolio launches, the fastest follow-up is not another visual tweak. It is stronger copy. That is why the recommended next page is the Content Creator Toolkit.