::在边距和填充之后

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将后它被应用，而不是其任一侧。尝试添加paddingto.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>