<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 1.2;
margin: 1em;
}
h1{display: table;
}
.h1::after{
content: '' ;
display: block;
height: 3px;
background: red;
width: 0;
transform: scale(0,1);
transform-origin: center left;
transition: transform .25s;
}
h1:hover::after{
transform: scale(1,1);
}
</style>
</head>
<body>
<h1> Tu futuro te esta esperando, estudia en EDteam</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 1.2;
margin: 1em;
}
h1{
display: inline-block;
}
h1::after{
content:"";
display: block;
height: 3px;
background: red;
transform: scale(0,0);
transform-origin: center left;
transition: transform .25s;
}
h1:hover::after{
transform: scale(1,1);
}
</style>
</head>
<body>
<h1>Tu futuro te esta esperando, estudia en EDteam</h1>
</body>
</html>