ejemplo - la etiqueta b en html

Eliminar el subrayado causado por la etiqueta abbr

Question

Utilizo la etiqueta <abbr> para mostrar el contenido completo de algunas palabras recortadas con la propiedad CSS text-overflow: ellipsis .

Cuando se utiliza <abbr> estas palabras tienen un subrayado de puntos y en el cursor al pasar el cursor a uno con un signo de interrogación.

Me las arreglé para cambiarlo usando esto. Pero, no estoy seguro de que esta sea la mejor manera, ¿hay algún problema con este enfoque?

abbr[title] {
  border-bottom: none !important;
  cursor: default !important;
}

Answer 1

Comenzando con v40, Firefox switched a usar texto-decoración para proporcionar el subrayado y el cromo también lo hará de esa manera . Por lo tanto, debe actualizar su código para incluir eso si necesita admitir esos navegadores:

abbr[title] {
  border-bottom: none !important;
  cursor: inherit !important;
  text-decoration: none !important;
}

Answer 2

Establece un borde y text-decoration . Eliminar eso con:

border: none;
text-decoration: none;

Por ejemplo: jsfiddle

Answer 3

Esto debería funcionar:

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

Esto utiliza abreviaturas de estilo.

Answer 4

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