尺寸滑动下划线

Question

我想让滑动下划线从左到右运行，当我悬停时，也设置从第一个字母到最后一行的宽度，而不是更大。我怎样才能做到这一点？

.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

您可以使用display: inline-block;保持固定的宽度。强调你可以使用伪类，如:before和:after。

在下面的代码片段看一看：

/* 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>

希望这有助于！