Question

我正在使用WordPress并为其添加菜单，我试图在每个导航按钮后添加一些内容。理想情况下，我希望在每个导航按钮后添加一个额外的<li>标记作为背景间隔符，但似乎您无法使用:after执行此操作。

然后我尝试了另一种方法，只使用这样的东西..

#header .nav li:after {
    content: " ";
    position: relative;
    display: block;
    width: 2px;
    min-width: 2px;
    height: 45px;
    min-height: 45px;
    background: url('images/nav-button-spacer-bg.png') left top no-repeat;    
}

最终，间隔物水平位于正确位置，但不是垂直位置，因为它直接放在菜单下面。

我通过将position更改为absolute并添加top: 0px;来解决此问题。

这似乎修复了它，但是我想知道这是否正确，因为ul标记和包含div元素都position static我想知道现在absolute项目是如何坚持它们的。

我猜测伪元素的工作方式不同，因此它不需要父元素的位置为fixed, relative or absolute。

我的思考是否正确，这是我做我需要做的最佳方式吗？

Answer 1

这是一个非常好的方式！我想你刚刚错过了一个实际上有position: relative;的元素。有关绝对定位伪元素的演示，请参阅此示例：http://jsfiddle.net/mytJ3/

但是你应该注意到，如果你有一个绝对定位的元素并省略了top，bottom，left，right属性，那么位置计算会有些如何回退到一种方式，好像元素是静态定位的。请参阅此答案：https://stackoverflow.com/a/10244977/723769

之后使用CSS伪元素

1 个答案: