0

我正在使用 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;    
}

最终，垫片在水平方向上处于正确位置，但不是在垂直方向上，因为它直接放在菜单下方。

我通过更改positiontoabsolute和添加来解决这个问题top: 0px;。

这似乎已经修复了它，但是我想知道这是否正确，因为ul标签和包含div元素都有一个positionofstatic并且我想知道 nowabsolute项目是如何粘在它们上的。

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

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

4

1 回答 1

1

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

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

于 2012-08-21T08:34:11.687 回答