S
SnakeNet
Xi
Programador
Hoy veremos como con CSS podemos hacer que al ponerte encima del enlace te muestre la url a donde te va a llevar en caso de hacer click encima del enlace.
Solo usaremos css para hacer que se visualice exactamente el truco esta en before y hover realmente y realmente es una pequeña modificación que no consume nada como el tooltip pero que muchas veces es interesante el añadirlo.
Solo deberemos copiar y pegar el siguiente código en nuestra página web es aconsejable quitar linea de css anterior a { y similares que puedan interferir en el resultado o adaptarlas.
Insertar CODE, HTML o PHP:
a {
position: relative;
display: inline-block;
color: #228475;
}
a::before {
position: absolute;
top: 100%;
content: attr(href);
opacity: 0;
display: block;
transition: .25s all;
height: 0;
overflow: hidden;
padding: .25em 1em;
background: #fff;
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
font-size: .7em;
color: #555;
}
a:hover::before {
opacity: 1;
display: block;
height: auto;
}Y el resultado seria el siguiente:
Y os dejo la demostración para que lo veais directamente antes de pasar por el enlace y después de pasar.
(DEMO)
