Remove underlining caused by abbr tag

Question

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

IMO problem is you're using `` with **wrong semantic**. It's for **abbreviations**, not for truncated text. It's like you want to change `
` because you're using that tag for footnotes... — Adriano Repetti, Oct 09 '14 at 10:55
I believe that this is better fitted for [code review](http://codereview.stackexchange.com/). If it's too old to be migrated, I believe it should be closed as off topic. Stack Overflow is Question Answer, not Question Advice. — David Archibald, Jan 11 '17 at 05:27

score 80 · Accepted Answer · edited Nov 11 '15 at 15:35

80

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

edited Nov 11 '15 at 15:35

Chris Peters

17,918
6
49
65

answered Aug 23 '15 at 00:23

frederickf

1,481
13
8

5

`cursor: inherit` would be a better option in case the `abbr` is within an `a` tag or some other context where the cursor should not be the default. I'll go ahead and edit your answer. – Chris Peters Nov 11 '15 at 15:31
3

important isn't necessary, and screws you over if you need to add your own proper border later. – Julix Jan 27 '17 at 03:57
Good grief, this baffled me for at least an hour. It's `border-bottom` AND `text-decoration`. – yalestar May 04 '17 at 22:04

score 10 · Answer 2 · edited Jan 11 '17 at 06:49

10

It sets a border and text-decoration. Remove that with:

border: none;
text-decoration: none;

Example: jsfiddle

edited Jan 11 '17 at 06:49

David Archibald

1,431
14
27

answered Oct 09 '14 at 10:54

Alex

8,875
2
27
44

6

It seems it doesn't work (FF 40 here), you need to add text-decoration: none for it to work – Elaine Marley Sep 01 '15 at 09:12

score 6 · Answer 3 · edited Jan 11 '17 at 06:03

6

This should work:

abbr[title] {
  text-decoration: none;
}

This uses styling abbreviations.

edited Jan 11 '17 at 06:03

David Archibald

1,431
14
27

answered Aug 29 '16 at 03:08

Mert S. Kaplan

1,045
11
16

score 0 · Answer 4 · edited Jan 11 '17 at 05:49

0

abbr[title] {cursor: default !important;}

edited Jan 11 '17 at 05:49

Tushar

85,780
21
159
179

answered Jan 11 '17 at 05:11

raj thakkar

17
1

the answer is already mention below, you just re-writing it again. – Bruce Jan 11 '17 at 05:33
@Joseph A code-only answer might not be a good one, but it's still an answer. I would recommend you this post about the LQPRQ: [You're doing it wrong: A plea for sanity in the Low Quality Posts queue](http://meta.stackoverflow.com/questions/287563/youre-doing-it-wrong-a-plea-for-sanity-in-the-low-quality-posts-queue) – FelixSFD Jan 11 '17 at 15:26

score 0 · Answer 5 · answered Jul 11 '21 at 18:08

0

Remove that with abbr[title] {text-decoration: none !important;}

answered Jul 11 '21 at 18:08

Mubtasim Fuad

339
2
4

Remove underlining caused by abbr tag

` because you're using that tag for footnotes...

5 Answers5