Unwanted double underlining of <abbr> elements

Question

The latest version of Chrome (v58) adds dashed underline to elements <abbr>

:

abbr[title], acronym[title] {
  text-decoration: underline dotted;
}

Bootstrap itself applies a dashed bottom border to elements <abbr>

. This leads to the unwanted effect with two borders:

How can I fix this?

+3

James donnelly 03 May '17 at 10:50

2 answers

Either delete text-decoration

or border-bottom

.

0

Stuart May 03 '17 at 10:51

James donnelly · Accepted Answer · 2017-05-03T10:50:00+0000

This can be fixed by simply adding the following to your CSS:

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

I presented this as an issue on the Bootstrap GitHub page ( # 22562 ), so hopefully Bootstrap will handle this for us in the next release.