Underlining for Emphasis: How to un-underline text on a Web page with CSS

One practice that probably sticks in the craw of many a Web developer is the use of underlining for emphasis.

No matter how loudly and often we tell our clients who maintain their own Web sites (via WordPress and other CMS-driven platforms) that using underlining for emphasis on the Web is a very bad idea, many of them do it anyway.

Coming from the worlds of handwriting and print, some people simply find underlining for emphasis a tough habit to break. In handwriting, for goodness sake, underlining is pretty much the only way, and certainly the easiest way, to add emphasis to a word or phrase.

Underlining for emphasis on the Web is like crying wolf.

If building Web sites is not what you do for a living, you might be wondering what the big deal is about underlining for emphasis.

Well, I’ll tell you.

Since the beginnings of the Web, links (aka hyperlinks, aka anchor tags) have been rendered with underlines. The default behavior of most browsers is to underline links. People who use the Web expect underlined content to be links. It’s a time-honored convention.

And since we want people to click on our links, it’s a bad idea to confuse and frustrate them with underlined words and phrases that are not links. (The fact that in recent years, it has become fashionable to style hyperlinks in their non-hovered states without underlines doesn’t alter the fact that underlined text = hyperlink in the minds of most Web surfers.)

So what’s a Web developer to do?

Here’s a simple snippet of CSS markup that will effectively defeat the underlining of content that uninitiated or forgetful content publishers try to underline:

u, span[style="text-decoration: underline;"] {
	text-decoration: none !important;
	font-style: italic;
	font-weight: bold;
}

Line 1 lists the two selectors to which the following rule should be applied.

• The first selector is a simple element selector, specifying the u HTML tag, for underline.
• The second selector is a combination of an element selector (span) and an attribute selector (style) based on an exact attribute value (text-decoration: underline;). This selector matches what WordPress inserts when a user clicks on the U toolbar icon when editing in Visual mode.

Next come the rule declarations.

• Line 2 is the biggie. It is what defeats what the author tried to do. Note the !important declaration. This case — the need to override an inline style — is one of only a very few situations in which I would ever use or recommend using the oft-misused !important declaration. You’re not going to defeat an inline style without declaring the declaration !important.
• Lines 3 and 4 pay respect to the fact that the author wanted to emphasize the content in question. I’m choosing to combine the two font properties (font-style and font-weight) that people typically use to emphasize content. Your mileage may vary; you could, of course, use properties like color or font-size (or anything else that works for you ) to effect the effect you want.