动画：悬停元素之前答案

【问题标题】：Animating :before element on hover动画：悬停元素之前
【发布时间】：2017-07-28 19:40:32
【问题描述】：

试图让我的后退和下一个按钮在悬停时具有由 :before 元素创建的动画“背景”。后退和下一个按钮位于页面的两侧，是帖子的文本，所以我无法完全控制它们的内容。我希望背景块在文本后面从一侧延伸到另一侧（下一个从右到左，上一个从左到右）。

我希望背景块（:before 元素）是它后面的文本的全高和全宽（文本有填充）

css（我省略了过渡：css，直到我可以让它正常工作。）

#nav-BN {
  position: relative;
  display: block;
  padding: 0;
  margin: 50px 0;
}

.nav-previous, .nav-next { 
  display: block; 
  position: absolute;
  z-index: 1;
}

.nav-previous { left: 0; }
.nav-next { right: 0; }

.nav-previous a, .nav-next a { 
  display: block;
  position: relative;
  z-index: 2;
  text-align: center;
  color: #333;
  padding: 10px 20px;
}

.nav-previous a:before, .nav-next a:before { 
  display: inline-block;
  position: absolute;
  content: '';
  left: 0; top: 0;
  height: 100%; width: 0%;
  background-color: #000;
}

.nav-previous a:hover:before, .nav-next a:hover:before { width: 100%; }

.nav-previous:before { transform-origin: left center; }
.nav-next:before { transform-origin: right center; }

<div id="nav-BN">
   <div class="nav-previous">
      <a>link</a>
   </div>

   <div class="nav-next">
      <a>link</a>
   </div>
</div>

我遇到的问题是使用 100% 宽度，使其成为屏幕的全宽，而不是包含 div 的全宽。悬停时文本在页面上跳转等

【问题讨论】：

标签： html css

【解决方案1】：

我以前用过这个，我认为这正是您正在寻找的： http://ianlunn.github.io/Hover/

使用示例 hvr-shutter-out-horizontal ： <a class="hvr-shutter-out-horizontal" href="#">Shutter Out Horizontal</a> 但是将 .hvr-shutter-out-horizontal 的 css 更改为 background: transparent;

【讨论】：

【解决方案2】：

https://cssanimation.rocks/pseudo-elements/

希望这会有所帮助。不确定你到底想做什么-

【讨论】：

本质上是创建一个动画背景。黑框上的文本，但直到您将鼠标悬停在文本上才会显示黑框，它通过从一侧拉伸到另一侧来显示

【解决方案3】：

我觉得你应该试试

弹性盒子

【讨论】：

flex-box 如何解决我的问题？我已经在我的网站中使用了 flexbox