Eliminar el subrayado azul del enlace en CSS

1. Establezca la propiedad text-decoration en none para eliminar el subrayado azul de un enlace en CSS
2. Utilice pseudoclases para la selección para eliminar el subrayado azul de un enlace en CSS
3. Elimine la propiedad box-shadow para eliminar el subrayado y el color de un enlace en CSS

Este tutorial presentará métodos para eliminar el subrayado azul formado en el hipervínculo en HTML. Usaremos CSS para eliminar dicho subrayado.

Establezca la propiedad text-decoration en none para eliminar el subrayado azul de un enlace en CSS

Podemos usar la propiedad text-decoration en CSS para especificar la decoración del texto. La propiedad es una propiedad taquigráfica de otras tres propiedades. Esas propiedades son línea de decoración de texto, color de decoración de texto y estilo de decoración de texto. La propiedad text-decoration-line aplica las decoraciones del texto como líneas superpuestas, subrayado y continuo. La propiedad text-decoration-color es responsable de establecer el color de la decoración del texto, y el text-decoration-style aplica diferentes estilos como sólido, ondulado, punteado, discontinuo a la decoración del texto. Cuando usamos la propiedad abreviada text-decoration, podemos especificar el valor como none. Como resultado, podemos establecer las tres propiedades en none. En consecuencia, eliminará el subrayado en el hipervínculo y también eliminará el color azul.

Por ejemplo, cree un div con la clase container. Luego, dentro del div, cree un span con la clase thisPage. A continuación, entre la etiqueta span, escriba el texto Current Page. Escriba una etiqueta anchor en la siguiente línea. Establezca el atributo href de la etiqueta en #. Dentro de la etiqueta anchor, escriba otro span con la clase otherPage. Escriba el texto Next Page entre el span. Luego, en el archivo CSS correspondiente, seleccione el ancla, etiqueta que se encuentra dentro de la clase container como .container a. Establezca el color rojo en el texto utilizando el código hexadecimal #FF0000. Luego, establezca la propiedad text-decoration en none.

El CSS a continuación establecerá el texto Next Page en rojo, que es un hipervínculo. La propiedad text-decoration, que se establece en none, eliminará el subrayado y el color azul del elemento de la etiqueta anchor.

Código de ejemplo:

<div class="container">
    <span class="thisPage">Current Page</span>
    <a href="#"><span class="otherPage">Next Page</span></a>
</div>

.container a {
  color: #FF0000;
  text-decoration: none;
}

Utilice pseudoclases para la selección para eliminar el subrayado azul de un enlace en CSS

Seleccionaremos las pseudoclases y aplicaremos las mismas propiedades CSS que el primer método para eliminar el subrayado azul de un enlace. Anteriormente, solo seleccionábamos la etiqueta anchor. En este método, usaremos pseudoclases para seleccionar las etiquetas de anclaje. Usaremos pseudoclases como :hover, :visited, :link y :active. La clase :hover se aplica cuando el usuario señala el elemento con un dispositivo señalador como un mouse, pero no necesariamente hace clic en el elemento. La clase :visited se aplica cuando ya se hace clic en el enlace. Asimismo, la clase :link selecciona todos los enlaces no visitados. Y la clase :active selecciona el enlace activo. Usaremos el mismo documento HTML para la demostración de este método.

Por ejemplo, utilice las pseudoclases :link, :visited, :hover y :active seleccionando la etiqueta anchor. Separe cada pseudoclases con una coma. Establezca la propiedad text-decoration en none y establezca la propiedad color en #000000.

Las propiedades CSS aplicadas entrarán en vigor en todas las pseudoclases en el siguiente ejemplo. El selector a:link cambiará el color del hipervínculo a negro y eliminará el subrayado cuando no se visite el enlace. Anula la propiedad color entre todos los demás selectores. El selector a:visited eliminará el subrayado del enlace después de que se haya visitado el enlace. Los efectos CSS también tendrán lugar cuando pasamos el cursor sobre el enlace y en el momento de hacer clic en el enlace. De esta forma, podemos eliminar el subrayado y el color azul del enlace usando las pseudoclases CSS.

Código de ejemplo:

<span class="thisPage">Current Page</span>
<a href="#"><span class="otherPage">Next Page</span></a>

a:link, a:visited,  a:hover, a:active
{
    color: #000000;
    text-decoration: none;
}

Elimine la propiedad box-shadow para eliminar el subrayado y el color de un enlace en CSS

A veces, se puede aplicar estilo al subrayado utilizando la propiedad box-shadow. Podemos proporcionar el efecto de subrayado a cualquier texto que utilice la propiedad. El siguiente fragmento de código CSS crea un subrayado.

box-shadow: inset 0 -3px 0 0 #bdb;

En tal caso, si queremos eliminar el subrayado, podemos eliminar la propiedad box-shadow, o podemos establecer el valor de la propiedad en none.

En el siguiente ejemplo, una clase span tiene el estilo de color verde, y la propiedad box-shadow se usa para crear un subrayado de color rojo. Luego, el valor de la propiedad se establece en none, lo que elimina el efecto de subrayado del texto.

Código de ejemplo:

<span class="thisPage">Current Page</span>

.thisPage {
  color: green;
  box-shadow: inset 0 -3px 0 0 red;
  box-shadow: none;
}