Animando el Text-decoration con independencia de los estilos del elemento 7.1.14
Animación del text-decoration de los enlaces (u otros elementos) con independencia de los estilos del propio elemento.
Animando el Text-decoration con independencia de los estilos del elemento
Pese a todo el valor de accesibilidad que añade y la obligatoriedad de indicar que cierta parte es un enlace, ¿estamos de acuerdo en que el tradicional a {text-decoration: value} a estas alturas es, no sólo anodino, sino hasta antiestético e incluso muchas veces se convierte en todo un rompediseños?
En otras ocasiones creo recordar que he tratado el tema. Hoy vuelvo sobre ello para compartir una forma diferente en su enfoque: animar el text-decoration, ya sea al :hover o al :focus de una manera sencilla y creo que vistosa.
Antes de seguir, el obligado crédito por autoría: las demos de ejemplo que acompañan este artículo tienen como inspiración y están realizadas en base a este post de @tobiasahlin
Animando el text-decoration
Partamos del código inicial para nuestros enlaces y pese a que hablo de animar el valor de 'text-decoration' lo primero que hacemos será prescindir de él para construir el nuestro con mayor libertad:
a {
position: relative;
color: rgba(0,0,0,.4);
text-decoration: none;
}
a:hover, a:focus {
color: rgba(0,0,0,.4);
outline: none;
}
Y ya que estamos anulamos también el 'outline'. Pero como es obligado, especialmente para la navegación por teclado, indicar de alguna forma la recepción del focus estamos obligados a reconstruirlo posteriormente.
Reconstruyendo el text-decoration
Para suplir el subrayado en los enlaces nos viene ni que pintado cualquiera de sus dos pseudoelementos o los dos. Todo depende del efecto buscado.
Inicialmemte y en los cuatro primeros enlaces de la demo sólo recurrimos a uno de ellos:
a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
transform: scaleX(0);
transition: 0.3s;
}
Este Css conforma una línea recta posicionada respecto al propio enlace con un tamaño relativamente pequeño (2px de alto) pero que queda oculta o no visible de entrada. La escondemos por partida doble con la propiedad 'visibility' al hacerlo no visible y poniendo su longitud a cero con 'scaleX(0)'.
Al usar el pseudoelemento nos permite declarar cualquier propiedad a nuestro gusto con independencia de los valores que tengan en el propio enlace. Tanto el color, como tamaño o posición del subrayado, por ejemplo.
Llegados a este punto sólo nos resta mostrar esta línea de forma creativa al recibir el enlace el ':hover' o el ':focus'. En los ejemplos de la demo comparten los mismos estilos. El subrayado se manifiesta de forma animada ('transition:.3s') creciendo desde el centro a los dos laterales.
a:hover:before,
a:focus:before {
visibility: visible;
transform: scaleX(1);
}
En base a estos estilos mínimos el límite lo pone tu imaginación y buen gusto a la hora de indicar que un enlace recibe el foco o el :hover. Un enlace o cualquier otro elemento.
Como en el último ejemplo de la demo en la que añado una pequeña animación Css '@keyframes'
See the Pen text-decoration: underline animated by Kseso (@Kseso) on CodePen
 con independencia de los estilos del propio elemento.){kind=link}
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Muy bueno!!! a practicar se ha dicho!!
ResponderEliminarExcelente !!!
ResponderEliminarMuy bueno! Lo único te diría te vendría bien incluir blank_ a tus enlaces fuera de tu página para que se abran aparte, y cuando se canse el usuario de esa otra página, la cierra y....sorpresa, sigue en tu página! Gracias por el contenido, sigue así! ;)
ResponderEliminar