Я работаю с 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
.
Прав ли я в своих мыслях и это лучший способ делать то, что мне нужно?