Работа с псевдоэлементом CSS после

Я работаю с 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.

Прав ли я в своих мыслях и это лучший способ делать то, что мне нужно?


person Brett    schedule 21.08.2012    source источник


Ответы (1)


Это отличный способ! Я полагаю, вы только что пропустили элемент, на котором действительно было position: relative;. См. Этот пример для демонстрации псевдоэлементов с абсолютным позиционированием: http://jsfiddle.net/mytJ3/

Но вы должны заметить, что если у вас есть элемент с абсолютным позиционированием и опущены некоторые из свойств top, bottom, left, right, вычисление позиции каким-то образом вернется к способу, как если бы элемент был статически позиционирован. См. Этот ответ: https://stackoverflow.com/a/10244977/723769

person Jona    schedule 21.08.2012
comment
Ах да, только что напомнил, что, поскольку содержимое помещается внутри элемента, а не next к нему как к другому элементу, это означает, что его родительским элементом будет соответствующий тег li, который Я установил relative. :) Спасибо за ответ! :) - person Brett; 21.08.2012