Question

我有一个放在a里面的导航列表，我试图在你悬停时获得一个出现在链接两侧的图像。基本上是链接两侧的箭头。

我设法得到了我正在寻找的效果：

<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

但是我不确定这是否是最好的解决方法，而且图像太接近文字。我尝试放置边距和填充，但这不起作用。最重要的是，图像不会与链接文本垂直居中。

任何人都知道这样做的正确方法，因为我只是通过反复试验？

Answer 1

我能够通过在不同网站上提供的答案来实现这一点，可以使用两种类似的方法完成：As described Here

如果你给父元素position：relative，你可以给它们伪元素位置：绝对并更准确地定位它们。

第二种方法是：

.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 */
}

然而，由于我通过反复试验来学习所有内容，即使这有效，任何人都可以确认这是否是正确的方法来解决这个问题，或者我应该采用不同的方法来遵守合规性，标准，和兼容性？

正确创建中心垂直导航列表，两侧都有悬停图像？

1 个答案: