动画:悬停时元素之前

Question

试图让我的后退和下一个按钮在悬停时有一个由 ：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 的文本在悬停时在页面上跳转等

Answer 1

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

使用示例 hvr-快门-输出-水平 ： <a class="hvr-shutter-out-horizontal" href="#">Shutter Out Horizontal</a> 但是将 .hvr-shutter-out-horizontal 的 CSS 更改为背景：透明;

Answer 2

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

希望这有帮助。不知道你想做什么——

Answer 3

我认为你应该尝试

弹性盒