Блог

Я пытаюсь сделать так, чтобы все ссылки на моей странице имели пользовательское подчеркивание, подобное этому.

Вот что у меня есть до сих пор из меню, в котором будет использоваться эта функция: CodePen

Подчеркивание вместо того, чтобы появляться под каждой ссылкой, появляется в разделе «Набор инструментов» (дедушка и бабушка объектов ссылки).

Я попытался просто создать первый код, но с функциями, которые позволяет SCSS (amp; и вложенные правила), но, похоже, мне чего-то не хватает, и я даже не буду показывать подчеркивание. Я предполагаю, что это как-то связано с моим использованием родительского селектора.

Как заставить мой текущий код работать правильно? Если проблема в том, что я использую родительские селекторы в целом, какой правильный селектор использовать в этом случае?

 (Stack Overflow is making me put this)
 

Вы используете position: absolute в ::after , поэтому подчеркивание будет иметь абсолютное положение, не связанное с <a> . Просто добавьте позицию относительно <a> , таким образом, вложив в нее абсолютное ::after содержание.

 .navbar {
    background-color: #191919cc;
    padding: 10px;
    border-radius: 10px;
    a {
        position: relative; // here
        margin: 0 10px;
    }
}
 

ссылка на кодовую ссылку: https://codepen.io/ashwin-chandran/pen/BaZjQLz