Search code examples
htmlcssabbr

Remove underlining caused by abbr tag

I use the <abbr> tag to show the full content of some trimmed words with the CSS property text-overflow: ellipsis .

When using <abbr> these words get a dotted underline and on hover cursor changes to one with a question mark.

I did manage to change it using this. But, I'm not sure this is the best way, is there anything wrong with this approach? 

abbr[title] {
  border-bottom: none !important;
  cursor: default !important;
}
Solution

  • Starting with v40 Firefox switched to using text-decoration to provide the underline and chromium will be doing it that way too. So you should update your code to include that if you need to support those browsers:

    abbr[title] {
  border-bottom: none !important;
  cursor: inherit !important;
  text-decoration: none !important;
}