Este va a hacer uno de los pocos tutoriales donde no le daré mucha intro. Se trata de un estilo tooltip que únicamente mostrara cuando pasemos el cursor sobre un enlace este nos revelara la URL
- Solo debes de agregar el siguiente código en la entrada.
<style type="text/css">
.post-body a::before {
content: attr(href);
float: none;
clear: both;
font-size: 22px;
font-family: "Roboto", sans-serif;
font-weight: 300;
text-transform: none;
padding: 15px 0;
background: #fff;
color: #55579e;
border-radius: 0;
position: fixed;
opacity: 0;
left: 0;
top: 0;
visibility: hidden;
transform: scaleY(0);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-align: center;
width: 100%;
transition: .3s ease-in-out;
z-index: 999;
margin: 0 auto;
}
.post-body a:hover::before {
opacity: 1;
visibility: visible;
transform: scaleY(1)
}
</style>
Ya esta solo queda disfrutar de tus enlaces en tus entradas
Comentarios (0)