:: после наценки и дополнения

Question

Я создаю горизонтальное меню, как это:

.leftNav li{ 
    list-style: none; 
    padding: 1em; 
    font-size: 1em; 
    display: inline; 
    color: #fff; 
} 
.leftNav li::after{ 
    content: " | "; 
} 

И я получаю:

menu item 1 |  menu item 2 |  menu item 3 | 

Я хотел бы равные промежутки между каждым:

menu item 1 | menu item 2 | menu item 3 | 

Я думал, что margin или padding справится с этим, но это не так.

Answer 1

Поскольку псевдоэлемент ::after находится внутри li, то после него будет применяться padding, а не любая его сторона. Попробуйте добавить padding в .leftNav li::after вместо li.

.leftNav li { 
 
    list-style: none; 
 
    font-size: 1em; 
 
    display: inline; 
 
} 
 
.leftNav li::after { 
 
    content: " | "; 
 
    padding: 1em; 
 
} 
 
.leftNav li:last-child::after { 
 
    content: ""; 
 
    padding: 0; 
 
}

<ul class="leftNav"> 
 
    <li>menu item 1</li> 
 
    <li>menu item 2</li> 
 
    <li>menu item 3</li> 
 
</ul>

Answer 2

псевдо элементы считаются частью содержимого родительского элемента, так что прокладка находится за пределами содержания и трубы. Попробуйте добавить прописку к псевдоэлементу ::after.

.leftNav li{ 
    list-style: none; 
    font-size: 1em; 
    display: inline; 
    color: #fff; 
} 
.leftNav li::after{ 
    content: " | "; 
    padding: 1em; 
} 

Answer 3

Установить прокладку для ::after элемент не для элемента списка.

.leftNav li { 
 
    list-style: none; 
 
    font-size: 1em; 
 
    display: inline; 
 
    color: #000; 
 
} 
 
.leftNav li::after { 
 
    content: " | "; 
 
    padding: 1em; 
 
}

<ul class="leftNav"> 
 
    <li>Menu 1</li> 
 
    <li>Menu 2</li> 
 
    <li>Menu 3</li> 
 
</ul>