CodePen Embed - Border bottom hover effect

<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 is owned by jihun Sim on CodePen.

See more by @simjihun on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.