1
Je suis en train de faire un menu de navigation simple composé de liens avec un soulignement animant, comme l'a démontré par Tobias Ahlin http://tobiasahlin.com/blog/css-trick-animating-link-underlines/underline épais quand vol stationnaire et quand il est actif
Je reçois cela fonctionne, mais je ne peux pas comprendre comment faire apparaître le soulignement immédiatement si l'élément de liste est actif.
Toute aide est la bienvenue, merci beaucoup!
Fiddle: https://jsfiddle.net/131d8q1v/5/
HTML:
<div class="container">
<ul>
<li class="active"><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
CSS:
ul {
list-style-type:none;
}
a {
position: relative;
color: #000;
text-decoration: none;
}
a:visited {
color: #000;
text-decoration:none;
}
a:hover {
color: #000;
text-decoration:none;
}
a:before {
content: "";
position: absolute;
width: 100%;
height: 4px;
bottom: -2px;
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;
}
a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}