×

Welcome to TagMyCode

Please login or create account to add a snippet.
 

border expand on hover from center

1
0
 
1
Language: HTML
Posted by: Nicole Patten
Added: Oct 6, 2016 5:42 PM
Views: 2093
Tags: no tags
  1. h1 { color: #666;display:inline-block; margin:0;text-transform:uppercase; }
  2. h1:after {
  3.   display:block;
  4.   content: '';
  5.   border-bottom: solid 3px #019fb6;  
  6.   transform: scaleX(0);  
  7.   transition: transform 250ms ease-in-out;
  8. }
  9. h1:hover:after { transform: scaleX(1); }
  10. h1.fromRight:after{ transform-origin:100% 50%; }
  11. h1.fromLeft:after{  transform-origin:  0% 50%; }

Write a comment

To post comments, please log in or register.