製作CSS下劃線動畫的長度與鏈接的文字長度相同

Question

所以，我希望將此下劃線懸停效果拉伸至我懸停的文本的長度，但不超過此長度。我試圖插入一些僞選擇器的形狀，如果我把太長的下劃線覆蓋所有長度，但不能像預計的那樣工作，可能會覆蓋任何想法，那麼將會覆蓋溢出。

這裏是鏈接到我的codepen：http://codepen.io/anon/pen/jVqqEZ

* { 
    background-color: blue; 
} 

li > a { 
    position: relative; 
    color: white; 
    text-decoration: none; 
} 

li > a:hover { 
    color: white; 
} 

li > a:before { 
    content: ""; 
    position: absolute; 
    width: 70%; 
    height: 1px; 
    bottom: 0; 
    left: -10; 
    background-color: white; 
    visibility: hidden; 
    transform: scaleX(0); 
    transition: all 0.2s ease-in-out 0s; 
} 

li > a:hover:before { 
    visibility: visible; 
    transform: scaleX(1); 
} 
/* 
li > a:after { 
    content: ""; 
    background-color: yellow; 
    height: 10px; 
    width: 100px; 
}*/ 

<ul class="menu"> 
    <li><a href="#about" class="slide-section">About</a></li> 
    <li><a href="#works" class="slide-section">Works and stuff</a></li> 
    <li><a href="#contact" class="slide-section">Contact</a></li> 
</ul> 

Answer 1

li > a:before { 
    width: 70%; /* initial*/ 
    width: 100%; /* changed value*/ 
} 

Answer 2

* { 
 
    background-color: blue; 
 
} 
 

 
li > a { 
 
    position: relative; 
 
    color: white; 
 
    text-decoration: none; 
 
} 
 

 
li > a:hover { 
 
    color: white; 
 
} 
 

 
li > a:before { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 1px; 
 
    bottom: 0; 
 
    left: -10; 
 
    background-color: white; 
 
    visibility: hidden; 
 
    transform: scaleX(0); 
 
    transition: all 0.2s ease-in-out 0s; 
 
} 
 

 
li > a:hover:before { 
 
    visibility: visible; 
 
    transform: scaleX(1); 
 
} 
 
/* 
 
li > a:after { 
 
    content: ""; 
 
    background-color: yellow; 
 
    height: 10px; 
 
    width: 100px; 
 
}*/

<ul class="menu"> 
 
    <li><a href="#about" class="slide-section">About</a></li> 
 
    <li><a href="#works" class="slide-section">Works and stuff</a></li> 
 
    <li><a href="#contact" class="slide-section">Contact</a></li> 
 
</ul>

Answer 3

使用的CSS如下：

li > a:before { 
... 
width: 100%; // not 70 % 
... 
}