How to Underline Using CSS text-decoration and the HTML U Element
Last Updated -
Underlines are a way to bring attention to important text. There are two primary ways to underline text in web pages, the U element and the CSS text-decoration property.
Both are simple to use, the U element adds semantic value to the meaning and may help your content SEO. The other can be rendered on demand, which makes changing the underline state easy by applying a CSS class(es) to the text.
There are different positions on whether underlines are helpful when conveying meaning or accessibility. Color alone may not be enough to convey meaning, and underlines are a natural way to add extra user experience value.
1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
You should also be careful when using underlines because they are most often associated with hyperlinks.
In fact, underlined text has become one of the most common, most recognizable features of our online experience. When we see an underlined word or sentence on a web page, we immediately assume it's a link
Off the web underlines are great for emphasis. They draw attention to important aspects of the message.
This image demonstrates the point by not only relying on a larger font, but underlining 'Warning'.
Underlines have several benefits:
- Familiarity: Widely understood web convention. Users understand that underlined text is a link.
- Scannability: When vertically scanning a page horizontal lines cut right through our line of sight.
- Accessibility: According to the WCAG 2.0, color shouldn't be the only visual indicator of a potential action. If you want your website to be accessible, you'll have to add another visual cue to links, and underlining is a logical choice.
Let's underline some important text!
How Do You Underline Text in CSS Using text-decoration?
A more flexible way to underline text is with the text-decoration property. It can also be used to remove underlines in hyperlinked text and add overlines.
An overline is the opposite of an underline. It renders a line above the text.
You can also use both underline and overline values for the same class definition.
.overline { text-decoration: overline; } .strike-through { text-decoration: line-through; } .underline { text-decoration: underline; } Some examples:
Underline
Overline
Strikethrough
The text-decoration property controls different ways the text can be rendered. By setting text-decoration to underline the text within the element is underlined.
What is the CSS text-decoration Property?
text-decoration is a CSS property that defines the appearance of lines on text. It is can be used for text-decoration-line , text-decoration-color , text-decoration-style, and text-decoration-thickness properties.
The best way to do this, if the text is part of a paragraph or sentence, is to wrap it within a SPAN tag. You can apply the class with the underline property to the containing SPAN tag.
In addition to underling and overlining text you can also apply a strike-through. The line-through value renders a line through eh middle of the enclosed text.
Typically CSS does not convey semantic meaning like an element. This does not mean it won't be used that way. The Google bot is pretty sophisticated and can interpret styles to convey meaning.
For the most part they are evaluating color contrasts, at least that is my impression. I also think they are looking for underlined, bold and possibly slight color contrasts to look for special text.
I do know they use bold text as small signal toward the keyword you are targeting.
A cool text-decoration trick is combining each value: underline, overline, or line-through as a space-separated list. This applies all the line styles to the text:
.over-under-lines { text-decoration: underline overline; } .all-lines { text-decoration: underline overline line-through; } It looks something like this: I have lots of lines
Dressing Up text-decoration Lines with text-decoration-* Properties
As with just about every major CSS property there is a collection of 'extended' properties you can set to apply more granular control and customization.
For text-decoration these include:
- text-decoration-color
- text-decoration-skip
- text-decoration-style
These extended properties give you control that mimics using the border properties (see below).
What is the HTML Code for Underline? The HTML U Element
The HTML U element, shorthand for underline, applies an underline to the enclosed text. It works much like the SPAN element, but adds semantic meaning to the content.
It you need to convey meaning to assistive technologies or search engine spiders using elements like U can make it easier for these automated tools understand the emphasis.
The U element typically has the same default styles as the SPAN element. This means it has a display:inline-block. This allows it to be used within a string of text (typically within a P tag) without changing the larger body of text's flow.
You would not want underline text to add line breaks or suddenly change the justification settings, etc. That would disrupt the reader's engagement.
You can also add styles via classes to a U element to further control how underlined text is rendered. For example you could change the color, font-face and letter spacing.
To further help assistive technologies you will want to add the aria-{underline setting}. Remember adding meta values to elements is very helpful to these technologies. They may also be used by search engines.
Using Borders to Create Underlines
The text-decoration CSS property is a great for text, but can be limited from a design perspective and not relevant to non-text content types. The CSS border properties can also be used to render underlines.
Managing Anchor Text Underlines
You can also use the text-decoration to remove an underline from anchor elements. Browser default stylesheets all underline links by default. This goes back to the web's early days.
Today, it is better to customize hyper link styles. They may be used for many functions, like navigation or application actions.
A link within a paragraph may want to be underlined, but often they are bolded or some other style set applied that makes them stand out from the surrounding text.
How to Remove an Underline from a Hyperlink in CSS
Just as you can add and style an underline using the CSS text-decoration property you can remove one as well. This can be handy when you need to remove an underline from an anchor.
Set the text-decoration value to none and all formatting is removed.
The A or anchor tag underlines text by default. You should also note you must explicitly add the 'a' to the selector to override the default behavior.
Wrapping It Up
There are two primary ways to underline text, the U tag and the text-decoration CSS property. The U element can apply semantic meaning to the underlined content the CSS technique may not convey to automated tools.
The CSS text-decoration approach is a little more flexible and is the approach I recommend.
You can grab the source code from my samples repository