之后使用 CSS 伪元素

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 item 粘在他们身上。

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

我的想法是否正确，这是做我需要做的最好的方式吗？

Answer 1

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

但是你应该注意到，如果你有一个绝对定位的元素并省略了一些top、bottom、left、right 属性，那么位置计算将在某种程度上回退到一个好像元素的方式是静态定位的。看到这个答案：https://stackoverflow.com/a/10244977/723769