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

Share this!

image of Boy Who Cried Wolf as analogy for underlining for emphasisOne 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.
Share this!

About JeffCohan.com

The nSiteful Tech Blog (the official blog of nSiteful Web Builders, Inc. since January of 2013) is where I (Jeff Cohan) and (occasionally) associates will be posting articles of potential interest to like-minded techies, nSiteful clients who are playing active roles in the maintenance of their own Web sites and blogs, and pretty much anyone interested in how Web strategies and tools can help them reach their goals.

This entry was posted in Techniques and tagged , , by Jeff Cohan. Bookmark the permalink.

About Jeff Cohan

Jeff and his wife, Margie, are the proud parents of Sarah and Jake. Jeff is the founder, president and chief cook and bottle washer of nSiteful Web Builders, Inc., a Web development and Internet Consulting firm. In his spare time, Jeff builds Web sites and Web applications, plays guitar, putters around in his basement woodworking shop, mercilessly spoils his grandchildren, and creates videos from more than two decades of home movies. His current video project is an extended montage of people (mainly family members) asking him to stop filming them.

Leave a Reply

Your email address will not be published. Required fields are marked *