Я только начинаю учиться фронтенду, и в общем по задумке у меня при наведении на пункт меню под ним должна высвечиваться полоска, я пытался это сделать это через псевдокласс after, но не вышло, а теперь не получается даже без наведения сделать полоску снизу с помощью псевдокласса Подскажите почему не работает и что исправить? Вот html:
<footer class="footer">
<div class="container">
<div class="footer__row">
<div class="footer__logo"><img src="/imgs/dhl_logo_12.jpg" alt=""></div>
<nav class="footer__menu">
<a href="#">Express</a>
<a href="#">Parcel & Ecommerce</a>
<a href="#">Logistics</a>
<a href="#">Mail</a>
<a href="#">Press</a>
<a href="#">About</a>
</nav>
<div class="footer__search-info">
<div class="magnifying-glass"></div>
</div>
</div>
</div>
</footer>
Вот scss:
&__menu {
line-height: 24px;
text-transform: uppercase;
letter-spacing: 0.03em;
display: flex;
align-self: center;
margin: 0 -22.5px;
a {
color: #ba0000;
margin: 0 22.5px;
font-weight: 600;
position: relative;
display: inline-block;
}
a::after {
content: '';
width: 100px;
height: 2px;
border-color: #ba0000;
position: absolute;
left: 50%;
bottom: 0;
display: block;
}
}