Styling Abbreviations and Acronyms

by 4 contributors:

Summary: The HTML elements abbr and acronym are useful accessibility aids, but their styling can come as a surprise to authors. See how you can take control of their presentation without sacrificing the benefits these elements provide. Many authors are beginning to use the HTML elements abbr (abbreviation) and acronym in their Web pages. This is to be encouraged, and according to Guideline 4 of the Web Content Accessibility Guidelines, both elements should be given a title attribute to improve "readability of the Web for all people, including those with learning disabilities, cognitive disabilities, or people who are deaf."

The Problem

Authors have discovered that any abbr or acronym that has a title attribute is rendered with a dotted "underline" in Mozilla and related browsers. This "underline" cannot be removed with the declaration text-decoration: none. The reason for this can be found in Mozilla's <tt>html.css</tt> file:

abbr[title], acronym[title] {
     border-bottom: dotted 1px;

The "underline" is in fact a bottom border.

The Solution

If authors wish to remove the "underline" from abbr and acronym elements, this can be done with the following rule:

abbr[title], acronym[title] {
     border-bottom-width: 0;

Of course, any number of things could be done instead, including changing the style or color of the border, changing the appearace of the text of these elements, using a subtly different text color, and so on.

It may be better to lessen the visual weight of the border without actually removing it. The "underline" tells readers that the word in question has extra information associated with it. In Mozilla, placing the mouse pointer over the element and leaving it for a moment will cause the contents of the title attribute to appear as a "tooltip" next to the mouse pointer. Removing the "underline" from these elements will rob readers of an indication that there is extra information available.


  • If the "underline" is to be removed, the author must style the bottom border of the element(s). text-decoration does not apply in this situation.

Original Document Information

  • Author(s): Eric A. Meyer, Netscape Communications
  • Last Updated Date: Published 09 Aug 2002
  • Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.
  • Note: This reprinted article was originally part of the DevEdge site.

Document Tags and Contributors

Contributors to this page: Mgjbot, Ptak82, Dria, CitizenK
Last updated by: Mgjbot,