公共技巧 纯css实现 鼠标移入时下划线悬浮【中心向两边扩展】、鼠标移开时【两边向中心收缩】特效

position: relative;
&::before,
&::after {
  content: '';
  background: #e60000;
  position: absolute;
  height: 2px;
  bottom: 0;
  width: 0;
  transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
&::before {
  right: 50%;
}
&::after {
  left: 50%;
}
&:hover {
  &::before,
  &::after {
    width: 50%;
    transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
}