我在获取下划线栏以在文字链接下制作动画时遇到问题。您可以在此处查看一个有效的示例:{{3}}
动画在除Safari 5.1.7之外的所有浏览器中都能正常运行。我究竟做错了什么?这是我的代码片段:
编辑:对不起,我添加了html和更多的CSS规则。我希望有所帮助。
.infiniteNav{
width: 100%;
height: 56px;
background-color: #9e0707;
background: linear-gradient(#c71e1e, #800909);
background: -webkit-linear-gradient(#c71e1e, #800909);
position: absolute;
top: 271px;
z-index: -2;
}
nav{
width: 955px;
height: 56px;
float: left;
text-align: center;
display: block;
background-color: #9e0707;
background: linear-gradient( #c71e1e, #800909);
background: -webkit-linear-gradient(#c71e1e, #800909);
}
nav a{
position: relative;
font-size: 25px;
font-family: arial;
color: #e0e0e0;
text-decoration: none;
font-weight: bold;
margin: 0px 15px;
line-height: 55px;
}
/********************************************************************************************************
This is the animated underline bar. *
********************************************************************************************************/
nav a:before{
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #e0e0e0;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
/*-webkit-transition: all 0.3s ease-in-out 0s;*/
-webkit-transition-property: all;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-in-out;
-webkit-transition-delay: 0s;
transition: all 0.3s ease-in-out 0s;
}
nav a:hover:before{
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
color: #e0e0e0;
}
nav a:active{
color: #e0e0e0;
}

<nav>
<a href="index.html">Home</a>
<a href="shop.html">Shop</a>
<a href="sales.html">Sales</a>
<a href="catalog.html">Catalog</a>
<a href="events.html">Events</a>
<a href="contact.html">Contact</a>
<a href="aboutus.html">About us</a>
<a href="partners.html">Partners</a>
</nav>
&#13;