什么创建一个动画线投掷文本链接？

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%); 
}