Größe gleitende Unterstreichung

Question

Ich möchte die gleitende Unterstreichung von links nach rechts laufen lassen, wenn ich schweben, und auch die Breite der Linie vom ersten Buchstaben bis zum letzten, und nicht größer einstellen. Wie kann ich das machen?

.nav-bar a:hover { 
 
    color: #000; 
 
} 
 

 
.nav-bar a:before { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 1px; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-color: #000; 
 
    visibility: hidden; 
 
    -webkit-transform: scaleX(0); 
 
    transform: scaleX(0); 
 
    -webkit-transition: all 0.3s ease-in-out 0s; 
 
    transition: all 0.3s ease-in-out 0s; 
 
} 
 
.nav-bar a:hover:before { 
 
    visibility: visible; 
 
    -webkit-transform: scaleX(1); 
 
    transform: scaleX(1); 
 
}

<div class="nav-bar"> 
 
    <ul> 
 
    <li><a href="#">RETROSPECTIVE SHOW /2006/</a></li> 
 
    <li><a href="#">TEXTS</a></li> 
 
    <li><a href="#">BIBLOGRAPHY</a></li> 
 
    </ul> 
 
</div>

Answer 1

können Sie display: inline-block; verwenden, um die feste Breite zu halten. Und zur Unterstreichung können Sie Pseudo-Klassen wie :before und :after verwenden.

Werfen Sie einen Blick auf das Snippet unten:

/* LEFT TO RIGHT */ 
 
.sliding-left-to-right { 
 
    display: inline-block; 
 
    margin: 0; 
 
} 
 
.sliding-left-to-right:after { 
 
content: ''; 
 
display: block; 
 
height: 3px; 
 
width: 0; 
 
background: transparent; 
 
transition: width .5s ease, background-color .5s ease; 
 
} 
 
.sliding-left-to-right:hover:after { 
 
width: 100%; 
 
background: blue; 
 
} 
 

 
/* LAYOUT STYLING */ 
 
body { 
 
    margin: 20px; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
    color: blue; 
 
} 
 

 
a:hover { 
 
    color: blue; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
}

<a class="sliding-left-to-right">Underline – Left to Right</a>

hoffe, das hilft!