Machen Sie CSS-Unterstreichung Animation gleiche Länge wie Link-Text

Question

Also ich möchte, dass diese Hover-Effekt unterstreichen nur auf die Länge des Textes, die ich schweben, und nicht mehr als das strecken. Ich habe versucht, eine Form mit Pseudo-Selektor einzufügen, die den Überlauf abdecken würde, wenn ich zum Beispiel zu lange unterstreiche, was alle Längen abdecken würde, aber es nicht wie angenommen funktionieren lassen kann ... irgendwelche Ideen vielleicht?

Hier Link zu meinem 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

Verwenden Sie die in CSS folgende:

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