Wordpress CustomizrテーマのためのCSSナビゲーションのホバーアニメーション

Question

私はこの一見小さな事の上に私の頭をラッキーされてきましたが、私は知恵の終わりです。私は自分のサイトで無料のCustomizrテーマを実行しています。

私が達成しようとしているのは、hover effect in the navigation bar like this demo here.です。ご覧のとおり、のテキストには、下線が引かれています。

私が発見し、ここで、このCSSコードを使用することを試みた：

.sliding-middle a { 
    display: inline-block; 
    position: relative; 
    padding-bottom: 3px; 
} 
.sliding-middle a:after { 
    content: ''; 
    display: block; 
    margin: auto; 
    height: 3px; 
    width: 0px; 
    background: transparent; 
    transition: width .3s ease, background-color .3s ease; 
} 
.sliding-middle a:hover:after { 
    width: 100%; 
    background: #08c; 
} 

しかし、結果は私がas you can see hereだ、ドロップダウンメニュー項目は、全体のすべての方法を強調しています。私が "a"タグをターゲットにしなかった場合、メインメニュー項目にはさらに奇妙な線が表示されることがわかりました。しかしそうすることによって、サブメ全体がこの効果を継承します。

誰かが私が逃していることを知っているなら、私を助けてください。前もって感謝します！

Answer 1

いいえ！数日後にそれを強調し、私のサイトを壊して、私はついにこの問題を解決しました。

まず、@ janh2に記載されているように、ナビゲーションメニューのラベルにspanタグを追加するページを取得する必要があります。私は別の質問とhave updated it with the answerを尋ねました。

次単に結果を得るために、以下の使用しています：

.sliding-middle span { 
    display: inline-block; 
    position: relative; 
    padding-bottom: 3px; 
} 
.sliding-middle span:after { 
    content: ''; 
    display: block; 
    margin: auto; 
    height: 3px; 
    width: 0px; 
    background: transparent; 
    transition: width .3s ease, background-color .3s ease; 
} 
.sliding-middle span:hover:after { 
    width: 100%; 
    background: black; /*colour you want your line to be*/ 

私は、これは男に役立ちます願っています。

Answer 2

あなたが達成したいの例では、Aの内側に2スパンのノードを使用してのみ（擬似を追加する：前の）最初の1を対象とし、このCSS

.header-skin-light [class*=nav__menu] li>a>span:first-of-type:hover::before { 
    background-color: #313131; 
    visibility: visible; 
    -webkit-transform: translate3d(0,0,0) scaleX(1); 
    -moz-transform: translate3d(0,0,0) scaleX(1); 
    transform: translate3d(0,0,0) scaleX(1); 
} 

であなたがリンクテキストのスパンを追加した場合同じ結果が得られるはずです。