动画：元素悬停前

试图让我的背部和下一个按钮有一个动画'背景'由a：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的整个宽度。页面文本周围跳跃时徘徊，等

来源

2017-07-28 user3550879