0

Я только начинаю учиться фронтенду, и в общем по задумке у меня при наведении на пункт меню под ним должна высвечиваться полоска, я пытался это сделать это через псевдокласс 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;
            }
     }

1 ответ 1

1

.footer__menu {
  line-height: 24px;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            display: flex;
            align-self: center;
            margin: 0 -22.5px;
}

.footer__menu a {
  color: #ba0000;
                  margin: 0 22.5px;
                  font-weight: 600;
                  position: relative;
                  display: inline-block;
                  line-height: 22px;
}

.footer__menu a::after {
                  content: '';
                  width: 100%;
                  height: 2px;
                  background: #ba0000;
                  position: absolute;
                  left: 0;
                  bottom: 0;
                  display: block;
                  opacity: 0;
                  transition: opacity .3s ease
            }
            
.footer__menu a:hover::after {
                  opacity: 1;
            }
<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>

1
  • Спасибо, я нашёл у себя опечатку, у меня вместо background-color было border-color Commented 4 окт. 2022 в 14:08

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.