/* De width gaat van 0 naar 100% en terug. Dit zorgt voor een animatie van links naar rechts en weer terug. */
header .navbar .navbar-nav li a {
color: black;
position: relative;
}
header .navbar .navbar-nav li a:before {
content: "";
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background-color: #00a7d3;
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
header .navbar .navbar-nav li.current-menu-item a {
font-weight: 500;
color: #00a7d3;
opacity: 1;
}
header .navbar .navbar-nav li a:hover {
background: none;
opacity: 1;
}
header .navbar .navbar-nav li a:hover:before {
visibility: visible;
background: #00a7d3;
opacity: 1;
width:100%;
}
De width gaat van 0 naar 100% en terug. Dit zorgt voor een animatie van links naar rechts en weer terug.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.