Запись hover вместе в before в препроцессоре

Question

Мне нужно чтобы hover срабатывал на before
Интересует как это реализовать используя именно свойства препроцессора sass.
То есть я навожу мышкой на слово и появляется мой псевдоэлемент

.menu {
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
}


.menu_item {
    text-decoration: none;
    font-size: 31px;
    color: black;
    margin-right: 40px;
    position: relative;
    &::before {
        content: "";
        height: 3px;
        position: absolute;
        width: 100%;
        background-color: yellow;
        top: 100%;
        opacity: 0;
        transition: 0.5s;
    }
    :hover::before {
        opacity: 1;
    }
}

<nav class="menu">
    <a class="menu_item" href="#">Home</a>
    <a class="menu_item" href="#">Product</a>
    <a class="menu_item" href="#">Store</a>
    <a class="menu_item" href="#">About us</a>
</nav>

Такой вариант не работает

Answer 1

вы забыли перед :hover::before написать знак &. Вот так всё работает:

&:hover:before {
opacity: 1;}

БЛОГ НА HUSL

Запись hover вместе в before в препроцессоре

Ответы (1 шт):