什麼創建一個動畫線投擲文本鏈接？

Question

我正在創建我的網站工作和我的導航欄我有3個鏈接。 1.關於 2.項目 3.contact。

這些文字都在（a）標籤中。 和一個標籤被包裝在一個div容器中。 懸停（鏈接）時，我想要一條動畫白線通過投擲（中）文本。只有在HOVER。

css/javascript/jquery解決方案只請。

Answer 1

添加到您的CSS。
不幸的是text-decoration屬性不具動畫性。

a:hover{ 
     text-decoration:line-through; 
    } 

編輯：我看到有一個更好的解決方案上面，我建議你使用，而不是內置的刪除線值。

Answer 2

您可以使用:before僞元素來創建該元素，並在懸停時簡單地設置它的寬度。

E.G：這個或類似的東西。

div { 
 
    display:inline-block; padding:10px; margin:0 10px 10px 0; 
 
    background:#333333; 
 
} 
 
div > a { 
 
    position: relative; 
 
    color: #000; 
 
    text-decoration: none; 
 
} 
 
div > a:hover { 
 
    color: #fff; 
 
} 
 
div > a:before { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 0%; 
 
    height: 2px; 
 
    bottom: 50%; 
 
    left: 0; 
 
    background-color: #fff; 
 
    visibility: hidden; 
 
    -webkit-transition: all 0.3s ease-in-out 0s; 
 
    transition: all 0.3s ease-in-out 0s; 
 
} 
 
div > a:hover:before { 
 
    visibility: visible; 
 
    width:100%; 
 
}

<div> 
 
<a href="#">About</a> 
 
</div><div> 
 
<a href="#">Projects</a> 
 
</div><div> 
 
<a href="#">Contact</a> 
 
</div>

Answer 3

這裏有一個pen

<ul> 
    <li> 
    <a href="">link1</a> 
    <span class="line-pass-through"> 
    </li> 
    <li> 
    <a href="">link2</a> 
    <span class="line-pass-through">  
    </li> 
    <li> 
    <a href="">link3</a> 
    <span class="line-pass-through">  
    </li> 
</ul> 

CSS

li { 
    display: inline-block; 
    margin-right: 25px; 
    position: relative; 
    overflow: hidden; 
} 

a { 
    text-decoration: none; 
    color: cornflowerblue; 
    font-size: 24px; 
} 

.line-pass-through { 
    position: absolute; 
    width:100%; 
    height:1px; 
    background: #444; 
    transform: translate(-100%, 50%); 
    top: 50%; 
    transition: all .3s ease-out; 
} 

li:hover .line-pass-through { 
    transform: translate(0%, 50%); 
}