css - 在鼠标关闭事件上更改动画原点

Question

我有一些 css/html 代码。我想通过执行以下操作来改善我的“悬停”状态：当我将鼠标悬停在一个按钮上时，有一个 before 元素从左向右滑动。我可以很容易地从右到左改变它。但是，当我执行“悬停”操作时，在元素向相反方向滑动之前 - 从右到左。我想要实现的是将其宽度从 100% 设置为 0%，但从左到右。我应该怎么做才能得到结果？

https://codepen.io/trueFalse24/pen/YzKNgYm

a{
    background: #7f8c8d;
    padding: 20px 30px;
    text-transform: uppercase;
    color: #fff;
    position: relative;

    &:before{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 0%;
      height: 100%;
      background: rgba(236,240,241, 0.3);
      transition: all 0.3s ease;
    }

    &:hover{
      &:before{
        width: 100%;
      }
    } 
}

标签： css

Answer 1

left我已经修改了您的笔，通过更改和属性的一些用法来获得效果right。我的编辑在下面的评论中标记。

.container{
  padding:0;
  margin: 0;
  box-sizing: border-box;
  background: #3498db;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;

  a{
    background: #7f8c8d;
    padding: 20px 30px;
    text-transform: uppercase;
    color: #fff;
    position: relative;

    &:before{
      content: '';
      position: absolute;
      top: 0;
      right: 0; /* Replaced left */
      width: 0%;
      height: 100%;
      background: rgba(236,240,241, 0.3);
      transition: all 0.3s ease;
    }

    &:hover{
      &:before{
        width: 100%;
        right: auto;  /* Added */
        left: 0; /* Added */
      }
    } 
  }
}