動畫：元素懸停前

試圖讓我的背部和下一個按鈕有一個動畫'背景'由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