transform-origin 实现线条运动方向
transform-origin 让我们可以更改一个元素变形（transform）的原点，transform-origin 属性可以使用一个，两个或三个值来指定，其中每个值都表示一个偏移量。 没有明确定义的偏移将重置为其对应的初始值。

本效果最最最重要的地方就在于这里，我们使用 transform-origin 去改变 transform: scale() 的原点实现线条运动的方向。

我们给线条设置一个默认的 transform-origin 记为状态1
hover 的时候，设置另外一个不同的 transform-origin, 记为状态2
所以，当然我们 hover 的时候，会读取状态2的transform-origin，从该原点开始放大至 scaleX(1)，hover 离开的时候，会读取状态1的transform-origin，从scaleX(1)状态缩小至该原点。

嗯，CSS代码大概是这样：

div {
   position: absolute;
   width: 200px;
   height: 60px;
}

div::before {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 200px;
   height: 2px;
   background: deeppink;
   transition: transform .5s;
   transform: scaleX(0);
   transform-origin: 100% 0;
}

div:hover::before {
   transform: scaleX(1);
   transform-origin: 0 0;
}