About the HTML Underlined Text Generator
Underlining on the web carries baggage, because readers assume anything underlined is a link they can click. Reach for it only when the meaning is clearly something else: a misspelling flagged in a proofreading interface, a proper name mark in Chinese typesetting, or content that was inserted into a document. This builder offers four routes, the u element, the ins element with a date, a CSS text decoration and a bottom border.
The decoration controls set text-decoration-style and text-decoration-color, so you can produce a wavy red line for spelling errors or a dotted grey rule under a glossary term without touching a pseudo element. The offset moves the line away from the baseline, which stops descenders in letters such as g and y being sliced through, and that single property is the main reason a default browser underline looks cramped next to a typeset one.
The border approach gives the finest control over thickness and spacing and never crosses a descender at all, at the cost of not wrapping neatly when the text runs onto a second line. Choose ins whenever the underline genuinely marks an addition to a document, since it records when the edit happened and pairs with the removal markup from the HTML Strikethrough Generator.
How to use
- Type the words you want underlined.
- Pick the markup: u, ins, a CSS decoration or a border.
- Choose the line style, colour and how far it sits below the text.
- Copy the snippet and its stylesheet into your page.
Common questions
- Is the u element still allowed?
- Yes. It was redefined to mean text with a non textual annotation, such as a spelling error or a proper name mark.
- Why avoid underlining ordinary text?
- Readers have learned that underlined words are links, so a decorative underline produces clicks that go nowhere.
- How do I make a wavy underline?
- Set the line style to wavy, which writes a text-decoration-style rule that browsers render as a squiggle.
- Border or text-decoration?
- A border gives exact control of thickness and gap but breaks awkwardly across lines. A decoration wraps correctly.