<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.efectoSubrayado { display: inline-block;
position: relative;
color: #0087ca;
font-weight: bold;
}
.leftToRight::after { content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: #0087ca;
transform-origin: bottom right ;
transition: transform 0.25s ease-out;
}
.leftToRight:hover::after { transform: scaleX(1);
transform-origin: bottom left;
}
.centerSides::after { content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: #0087ca;
transform-origin: left right;
transition: transform 0.25s ease-out;
}
.centerSides:hover::after { transform: scaleX(1);
transform-origin: right left;
}
</style>
</head>
<body>
<div>
<p class="efectoSubrayado leftToRight">Pasa el ratón por encima para ver el efecto</p>
</div>
<div>
<p class="efectoSubrayado centerSides">Pasa el ratón por encima para ver el efecto</p>
</div>
</body>
</html>
Crear cuenta
Comentarios sobre la versión: 1 (0)
No hay comentarios