-1
Я использовал: после и: перед элементами psuedo, чтобы иметь границу при наведении курсора на навигационные ссылки. Я пытаюсь иметь такой же эффект границы наведения: активный psuedo classe, так что некоторые могут сказать мне, как это сделать. Вот мой код:: активный класс не работает
nav ul .u {
position: relative;
color: f4f4f4;
}
nav ul li a:after,
nav ul li a:before {
content: " ";
position: absolute;
display: block;
width: 0;
height: 2px;
transition: width .2s;
}
nav ul li a:after {
left: 10%;
bottom: -5px;
background-color: #f1c40f;
}
nav ul li a:before {
right: 10%;
top: -5px;
background-color: #f1c40f;
}
nav ul li a:hover {
color: #F4F4F4;
}
nav ul li a:hover:before,
nav ul li a:hover:after {
width: 80%;
}
nav ul .active a:after,
nav ul .active a:before {
content: " ";
position: absolute;
display: block;
width: 0;
height: 2px;
transition: width .3s;
}
nav ul .active a:after {
left: 10%;
bottom: -5px;
background-color: #f1c40f;
}
nav ul .active a:before {
right: 10%;
top: -5px;
background-color: #f1c40f;
}<nav>
<ul>
<li class="active"><a class="u" href="#">Home</a></li>
<li><a class="u" href="#">About</a></li>
<li><a class="u" href="#">Specials</a></li>
</ul>
</nav>
Это кажется немного за бортом. Почему бы вам просто не использовать обычные стили наведения. – jessica