0

の中に配置したナビゲーションリストがあります。ホバーするとリンクの両側に表示される画像を取得しようとしています。基本的に、リンクの両側にある矢印。

私は私が探している効果を得ることができました：

<ul>
          <li style=""> <a href="#">Services</a> </li>
          <li> <a href="#">About</a> </li>
          <li> <a href="#">Media</a> </li>
          <li> <a href="#">FAQ</a> </li>
          <li> <a href="#">Portfolio</a> </li>
          <li> <a href="#">Contact</a> </li>
        </ul>


.nav ul{
    list-style:none;
    text-align:center;

}


.nav li:hover a:before, .nav li:hover a:after {
    content:url(../images/nav_bullet.png);
}

最終結果は次のようになりますが、リストが中央に配置されます。

link
>> Hovered Link <<
link

ただし、それが最善の方法であるかどうかはわかりません。また、画像がテキストに近すぎます。余白とパディングを配置してみましたが、うまくいきませんでした。さらに、画像はリンクテキストの垂直方向の中央に配置されていません。

私は試行錯誤しているだけなので、これを行う適切な方法を知っている人はいますか？

4

1 に答える 1

0

私は別のサイトで提供された回答でこれを達成することができました、それは2つの同様の方法で行うことができます：ここで説明されているように

親要素の位置：relativeを指定すると、それらの疑似要素のposition：absoluteを指定して、より正確に配置できます。

そして2番目の方法は次のとおりです。

.nav li:hover a:before, .nav li:hover a:after {
content:url(../images/nav_bullet.png);
margin:0 5px;/* horizontal margin*/
position:relative;
top:2px;/* or what ever you need */
}

しかし、試行錯誤しながらすべてを学んでいるので、これがうまくいくとしても、これが適切な方法であるかどうか、またはコンプライアンス、標準、互換性に準拠するために別のルートをとるべきかどうかを誰かが確認できますか？

于 2012-06-16T11:57:23.637 に答える