ホバー上のボトムボーダーを展開しても機能しませんか？

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> 

サス

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) 

私の完全なコードは文書化されている（構文エラー以外の）あなたのコードを持つ2つの主要な問題がありました

Answer 1

here：

は、
• よuはa:after疑似要素にdisplay: blockを設定していませんでした。これは、擬似要素に高さと幅を提供するものであるため必須です。これがなければ、疑似要素は0 x 0pxになりますので、何も表示されません。
• あなたのSassコードが字下げされた方法（あなたがSass構文を使用していると仮定し、コロン、括弧、インデントがないSCSS構文を使用していないと仮定した場合）a:hover:afterセレクタがa:afterセレクタの下にネストされ、 .menuHolder li a:after a:hover:afterとなります。これはどの要素にも一致しないので、ホバーでは何も起こりません。

これらの2つの変更以外に、インデントが一貫していない3つの場所がありました。それは、通常の2/4/6の代わりに5/7スペースが提供された領域です。

Sass構文の固定コードは以下のようになります。同等のSCSS構文のデモが利用可能ですhere。 JSFiddleはSass構文をサポートしていないので、デモ用にSCSS構文を使用しました。

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 

---

テキストの色の変化は上が起こるので、私はお勧めしたい1つの追加の改善はli自体（つまり、.menuHolder li:hover a:after代わりの.menuHolder li a:hover:afterとしてセレクタを持っている）に:hover効果を置くことですliの:hoverと一致しています。

Hereはこのバージョンのデモです。