9

Can you style a <abbr> tag using css? In firefox, it is displayed with dots underneath the words like in the picture below:
enter image description here

Is this a browser by browser thing? can you remove the dots or do you just use the title="title here" option? thanks

Jacob G
  • 13,762
  • 3
  • 47
  • 67
  • 2
    Does [this](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr#Default_styling) [reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr#Browser_compatibility) help? – summea Mar 21 '14 at 21:49

6 Answers6

22

Firefox 40 has a small change:

https://developer.mozilla.org/en-US/Firefox/Releases/40/Site_Compatibility#CSS

To remove default underline in Firefox, you now need to set CSS:

text-decoration: none;
luminancedesign
  • 362
  • 2
  • 5
12

  • Can you style a tag using css?

    Yes, you can.

  • In firefox, it is displayed with dots underneath the words

    Yes. Firefox default style is

    abbr[title], acronym[title] {
    border-bottom: 1px dotted;
}

  • Is this a browser by browser thing?

    Yes, this behaviour is determined by the default stylesheet of each browser. Then, different browsers may display it different by default.

  • Can you remove the dots?

    Yes, just override the default syle:

    abbr[title], acronym[title] {
    border-bottom: none;
}
Oriol
  • 274,082
  • 63
  • 437
  • 513
6

It is possible to style the tag with CSS for modern browsers. However, a fallback for older browsers with JavaScript may be used. (But who wants to support IE 8?)

abbr {
position: relative;
}

abbr:hover::after {
position: absolute;
bottom: 100%;
left: 100%;
display: block;
padding: 1em;
background: yellow;
content: attr(title);
}

This will add an absolutely positioned pseudo element top right of the tag using the attribute content within the title when the tag is hovered over.

Ryan Drake
  • 623
  • 3
  • 9
  • 30
  • Thank you! That will be useful too. – Jacob G Mar 21 '14 at 22:14
  • If you do this, you could end up seeing both the ::after content as well as the browser-generated tooltip, which looks pretty bad IMHO. You're probably better off going a JS route if styling tooltips is something important to you. – Scribblemacher Oct 17 '16 at 13:51
2

Mr. Bunnyman.

Seems like your experiencing a cross browser issue.

Yes, you can style <abbr> tag. Example below.

abbr { border: 2px dashed red; }

If your experiencing an underline on a certain browser, try:

abbr { border-bottom: 0px !important; }
Dr Upvote
  • 8,023
  • 24
  • 91
  • 204
0

Can you style a <abbr> tag using css?

Yes, but you cannot style the title attribute—though you can fake it unreliably.

Is this a browser by browser thing?

Yes, default styles are set in the user agent stylesheet.

Can you remove the dots?

Absolutely. To remove them unset the text-decoration property in your stylesheet:

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

Inclusive design approaches are also possible.

vhs
  • 9,316
  • 3
  • 66
  • 70
-1

You can style any HTML element with any CSS you want, the problem is, for some HTML elements it will have no effect.

In other words, you can add the CSS to whatever the heck you want, but the browser may not support your changes.
i.e. Styling the <head> element is possible, but it is pointless.

Ben
  • 2,200
  • 20
  • 30
  • 2
    Downvoted: This answer is confusing and self contridictory. It also doesn't answer the OP's question. – Morvael May 18 '18 at 10:28
  • So, you can style any element but you can't style any element, right? – KViiTEN Jun 12 '20 at 03:20
  • It's an old answer - but as tested now, July 2021, in Firefox and Chrome the element responds to css styling. Tested with: – Andrew Paul Jul 08 '21 at 10:48