避免元素包裝上展開懸停狀態

Question

目前小提琴： https://fiddle.jshell.net/Benihana77/cjtg5ojf/

的設置： 我們有一個靈活的促銷，其中兩個主要的文本和按鈕/鏈接文本的長度是可變。按鈕/鏈接是內聯的，最後在結束時有一個擴展箭頭，在懸停時增加一定量（20px）。

問題： 因爲這兩個變量是非常靈活的，我們可以運行到場景中帶箭頭的按鈕/鏈接可以足夠薄，以適應在同一行作爲主要的文本，但上懸停，將運行進入填充並彈出。當然，這是一個非常糟糕的經歷。我可以處理它，因爲它已經太寬了，但不適合當它不適合只在懸停。

我想弄明白： 有沒有一種方法來有效地「按下」按鈕？也就是說，不管它的寬度（可變）+ 20px，所以如果它在盤旋的時候太寬了，它會自動地在它自己的線上事先？

我試過calc（），但我知道那不是真的是如何工作的。空白：無覆蓋和溢出有其他不良影響。我知道這是超級簡單的JS（只是檢測寬度，添加20px，badda bing badda繁榮），但我希望能夠避免這種依賴。

最壞的情況： 我要麼使用JS，要麼就強迫它到第二行。

感謝您的幫助！

Answer 1

添加保證金權的基本狀態，作廢了懸停：

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.promo { 
 
    background: #a30b35; 
 
    border: 0; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    font: 20px "DINPro", sans-serif; 
 
    padding: 40px; 
 
    text-transform: uppercase; 
 
    transition: all .2s; 
 
    width: 485px; 
 
} 
 

 
.promo-text { 
 
    display:inline; 
 
} 
 

 
.button { 
 
    color: #000; 
 
    line-height: .9; 
 
    display: inline-flex; 
 
} 
 

 
.button-text { 
 
    float: left; 
 
} 
 

 
.arrow { 
 
    float: left; 
 
    width: 70px; 
 
    margin: 8px 0 0 10px; 
 
    margin-right: 20px; /* added */ 
 
    height: 2px; 
 
    background: #000; 
 
    transition: all 200ms ease-in-out; 
 
} 
 

 
.arrow svg { 
 
    margin: -5px -1px 0 0px; 
 
    float: right; 
 
    fill: #000; 
 
    transition: all 200ms ease-in-out 
 
} 
 

 
.button:hover .arrow { 
 
    width: 90px; 
 
    margin-right: 0px; /* added */ 
 
} 
 

 
.button:hover .arrow svg {}

<div class="promo"> 
 

 
    <div class="promo-text"> 
 
    The 2017 Jimmy Aard lle ipaei acndamy, ace Jace ace une 26.</div> 
 
    
 
    <div class="button"> 
 
    <div class="defense"> 
 
     <div class="button-text"> 
 
     Rea fgdd fgdmmmore asasas asa 
 
     </div> 
 
     <div class="arrow"> 
 
     <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="8px" height="12px" viewBox="0 0 7.1 11.4" style="enable-background:new 0 0 7.1 11.4;" xml:space="preserve"> 
 
      <polygon class="st0" points="1.4,11.4 0,10 4.3,5.7 0,1.4 1.4,0 7.1,5.7 " /> 
 
     </svg> 
 
     </div> 
 
    </div>  
 
    </div> 
 
    
 
</div>