Can you style a <abbr> tag?

StackOverflow https://stackoverflow.com/questions/22570130

  •  19-06-2023
  •  | 
  •  

Question

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

Was it helpful?

Solution 2

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

OTHER TIPS

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;

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.

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

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.

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top