Remove underlining caused by abbr tag

html css abbr
Dhanushka Dolapihilla picture Dhanushka Dolapihilla · Oct 9, 2014 · Viewed 23k times · Source

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;
}

Answer

frederickf picture frederickf · Aug 23, 2015

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;
}

Related questions

How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How do I vertically center text with CSS?

I have a <div> element which contains text and I want to align the contents of this <div> vertically center. Here is my <div> style: #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #…

Read More
How to align a <div> to the middle (horizontally/width) of the page

I have a div tag with width set to 800 pixels. When the browser width is greater than 800 pixels, it shouldn't stretch the div, but it should bring it to the middle of the page.

Read More