我在Jsfiddle上尝试过这个

要在悬停时展开底部边框,可以使用transform:scaleX'();(mdn reference)并在悬停状态下将其从0转换为1.

以下是边框悬停效果的示例:

边框和过渡在伪元素上设置,以防止转换文本并避免添加标记.
要从左或右扩展底部边框,可以将transform-origin属性更改为伪元素的左侧或右侧:

h1 { color: #666;display:inline-block; margin:0;text-transform:uppercase; }
h1:after {
  display:block;
  content: '';
  border-bottom: solid 3px #019fb6;  
  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%; }

Expand from center


Expand from right


Expand from left