scss 动画链接[Mixin]

Posted 2021-05-17

@mixin animate-link {
  position: relative;
  display: inline-block;
  color: $but-main-color;

  &:before,
  &:after {
    content: '';
    position: absolute;
    bottom: 0;
    height: 1px;
    width: 0;
    background-color: $but-main-color;
    transition: width 0.2s ease-out;
  }

  &:before { left: 0; }
  &:after { right: 0; }

  &:hover {
    &:before,
    &:after {
      width: 50%;
    }
  }
}