Al diseñar sitios web, cada detalle cuenta, incluidos los enlaces.
Como cualquier otro elemento, los enlaces se pueden diseñar usando propiedades CSS. Gracias a CSS puedes cambiar su color, fondo y tamaño de fuente. Incluso puede eliminar el subrayado que aparece debajo de los enlaces.
La forma en que escribe ese CSS depende del estado en el que se encuentran los enlaces. Estos estados, también conocidos como pseudoclases, son clases CSS basadas en la actividad del usuario. A continuación se definen cuatro pseudoclases.
Un enlace – cuando el usuario no ha visitado, pasado el cursor sobre el enlace o hecho clic en él
a: visitado – después de que el usuario haya visitado el enlace
un: flotar – cuando el usuario pasa el mouse sobre el enlace
un: activo – cuando el usuario hace clic en un enlace
De forma predeterminada, el subrayado aparecerá debajo de los enlaces en cualquier pseudoestado: al pasar el mouse sobre él, hacer clic en él, visitarlo o ninguno de los anteriores. Esto se muestra en la demostración a continuación:
Puede usar CSS para eliminar el subrayado de los enlaces decoración de texto propiedad. A continuación, discutiremos cómo definir esta propiedad para eliminar el subrayado por completo de los enlaces en un sitio HTML o un sitio Bootstrap.
Cómo quitar el subrayado de los enlaces en CSS
- Agregue su código HTML a la sección de su sitio web.
- Defina cuatro pseudoclases de enlaces con la propiedad text-decoration en la sección.
- Asegúrese de que un: enlace y un: visitado estén delante de un: pasar el mouse y aa: activo esté al final. Esto es necesario para poner en cascada una hoja de estilo.
- Establezca cada valor de propiedad en «ninguno».
El proceso de eliminación de subrayado es realmente simple. Echemos un vistazo a todo el código y luego veamos cómo se ve en la interfaz.
Aquí está el CSS:
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }
El orden es importante aquí – Un enlace y a: visitado debe ser primero, luego un: flotarSiguiente un: activo.
Aquí está el código HTML:
<p><b><a rel="noopener" target="_blank" href="https://blog.hubspot.com/website/default.asp" target="_blank">This is a link</a></b> that appears within a paragraph.</p>
Aquí está el resultado:
ver la pluma Eliminar el subrayado del enlace con CSS 1 de Christina Perricone (@hubspot) en CódigoPen.
También puede alternar el subrayado para que solo se muestre cuando pasa el cursor sobre un enlace y hace clic en él. hazlo con la regla decoración de texto: subrayado; al igual que:
ver la pluma Eliminar el subrayado del enlace con CSS 2 de Christina Perricone (@hubspot) en CódigoPen.
¿Cómo elimino el subrayado de los enlaces en CSS en Bootstrap?
El proceso para eliminar el subrayado de los enlaces es ligeramente diferente si está utilizando Bootstrap CSS en su proyecto. Analicemos brevemente el proceso para los sitios de Bootstrap.
De forma predeterminada, en Bootstrap, los enlaces muestran un subrayado solo si están en flotar o activo país. Esto significa que cuando un usuario pasa el cursor sobre un enlace o hace clic en él, se mostrará un subrayado. De lo contrario, el subrayado no se mostrará en los enlaces, incluso si se visitan. Además, los enlaces definidos por la clase de botón Bootstrap nunca contienen un guión bajo.
Para eliminar el subrayado en los enlaces, independientemente de su estado, debe agregar algo de CSS.
Aquí está el CSS:
a:hover { text-decoration: none; }
a:active { text-decoration: none; }
Aquí está el código HTML:
<p><b><a rel="noopener" target="_blank" href="https://blog.hubspot.com/website/default.asp" target="_blank">This is a link</a></b> that appears within a paragraph. Below is a link defined by Bootstrap's button class.</p>
<a class="btn btn-info" rel="noopener" target="_blank" href="#" role="button">Link</a>
Aquí está el resultado:
ver la pluma Eliminar el subrayado del enlace con CSS – Bootstrap de Christina Perricone (@hubspot) en CódigoPen.
Estilo de enlaces con CSS
Eliminar el subrayado en los enlaces es una de las preguntas más frecuentes de los desarrolladores front-end novatos. La buena noticia es que el proceso es sencillo gracias decoración de texton inmobiliaria. Solo necesita un poco de conocimiento de HTML y CSS para hacer esto.
Nota del editor: esta publicación se publicó originalmente en julio de 2020 y se actualizó para que sea completa.
Publicado originalmente el 5 de abril de 2021 a las 7:00:00 a. m., actualizado el 16 de mayo de 2022
