<h1 class="fromCenter">가운데부터</h1><br/>
<h1 class="fromRight">오른쪽부터</h1><br/>
<h1 class="fromLeft">왼쪽부터</h1>
h1 {
color: #000;
display:inline-block;
margin:0;
text-transform:uppercase; }
h1:after {
display:block;
content: '';
border-bottom: solid 3px #ea2129;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
h1:hover:after { transform: scaleX(1); }
h1.fromRight:after{ transform-origin:100% 50%; }
h1.fromLeft:after{ transform-origin: 0% 50%; }
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.