Развернуть нижнюю границу при наведении не работает?

Question

То, что я пытаюсь сделать, и код (некоторые из), который я использую, находится в ответе на другой вопрос, в частности ответ «от центра» here . Просто ничего не происходит для описания эффекта. Есть идеи?

HTML

<ul id="items"> 
    <li> <span id="menuBtnOff" onclick="menuIn()">&#x2573;</span></li> 
    <li> <a href="#about" rel=""> About Me </a> </li> 
    <li> <a href="#profile" rel=""> What I can do for you </a> </li> 
    <li> <a href="#footer" rel=""> Contact </a> </li> 
</ul> 

Sass

li:hover 
    a 
     cursor: pointer 
     color: $menuGreen 
     transition: all 0.1s ease-in-out 

    li, #menuBtnOn 
    transition: all 0.1s ease 
    text-indent: initial 
    resize: none 
    float: right 
    display: inline-block 
    padding: 15px 
    line-height: 5px 
    font-family: 'Roboto', sans-serif 
    font-weight: lighter 
    font-size: 14px 
    color: black 
    &:not(:first-child) 
     border-right: 1px solid rgba(37, 37, 37, 0.28) 
    a:after 
     content: '' 
     border-bottom: solid 3px $menuGreen 
     transform: scaleX(0) 
     transition: transform 250ms ease-in-out 
     a:hover:after 
     transform: scaleX(1) 

Мой полный код документирован here

Answer 1

Существовали две основные проблемы, связанные с вашим кодом (кроме ошибок синтаксиса):

• Yo u не устанавливали display: block в псевдоэлемент a:after. Это является обязательным, так как он обеспечивает псевдоэлемент высотой и шириной. Без этого псевдоэлемент будет 0 x 0px, и вы ничего не увидите.
• То, как ваш код Sass был отступом (я предположил, что вы используете синтаксис Sass, а не SCSS, основанный на недостающих двоеточиях, фигурных скобках и углублениях) означает, что селектор a:hover:after вложен под селектор a:after, и поэтому конечный селекторный выход будет .menuHolder li a:after a:hover:after. Это не соответствует ни одному элементу, и поэтому при наведении курсора ничего не происходит.

Помимо этих двух изменений было 3 места, где отступы не были согласованы. То есть были области, где были предоставлены 5/7 пробелов вместо обычных 2/4/6/...

Фиксированный код в синтаксисе Sass был бы следующим. Доступна демонстрация с эквивалентным синтаксисом SCSS here. Я использовал синтаксис SCSS для демонстрации, потому что JSFiddle не поддерживает синтаксис Sass.

a:link, a:visited 
    text-decoration: none 
    color: black 

.menu 
    white-space: nowrap 
    overflow: hidden 

.menuHolder 
    overflow: hidden 
    position: fixed 
    display: inline-block 
    top: 0 
    right: 0 
    width: 110% 
    padding: 6px 0 0 
    background-color: rgba(70, 106, 135, 0.65) 
    text-align: right 
    transition: all 1s ease-in-out 
    max-height: 37px 
    z-index: 10 

    ul 
    margin: 0 
    padding: 0 

    li:hover 
    a 
     cursor: pointer 
     color: $menuGreen 
     transition: all 0.1s ease-in-out 

    li, #menuBtnOn 
    transition: all 0.1s ease 
    text-indent: initial 
    resize: none 
    float: right 
    display: inline-block 
    padding: 15px 
    line-height: 5px 
    font-family: "Roboto", sans-serif 
    font-weight: lighter 
    font-size: 14px 
    color: black 

    &:not(:first-child) 
     border-right: 1px solid rgba(37, 37, 37, 0.28) 

    a:after 
     display: block 
     content: "" 
     border-bottom: solid 3px $menuGreen 
     transform: scaleX(0) 
     transition: transform 250ms ease-in-out 
     margin-top: 10px 

    a:hover:after 
     transform: scaleX(1) 

    #menuBtnOff, 
    #menuBtnOn 
    transition: all 0.3s ease 
    cursor: pointer 
    color: black 

    &:hover 
     color: $menuGreen 

    #menuBtnOn 
    font-size: 20px 
    float: left 

---

Еще одно усовершенствование, которое я хотел бы предложить, чтобы поставить :hover эффект на самом li (то есть, есть селектор как .menuHolder li:hover a:after вместо .menuHolder li a:hover:after), потому что изменение цвета текста происходит на :hover самого li, и это сделало бы его последовательным.

Here является демоверсии для этой версии.