Unwanted double underline on <abbr> elements

Question

The latest version of Chrome (v58) adds a dotted underline to <abbr> elements:

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

Bootstrap itself applies a dotted bottom border to <abbr> elements. This leads to an undesirable double-border effect:

How can I fix this?

Answer 1

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

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

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

Answer 2

Either remove the text-decoration or the border-bottom.