::after边距和填充

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可以处理这个问题，但实际上并不行。

- Paul Dessert

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>

- Hidden Hobbes

---

谢谢！那很有道理。我在发布问题后就想到了这一点。 - Paul Dessert

没问题，可能只是那种情况，你需要谈论一下才能找到答案。 :) - Hidden Hobbes

Answer 2

伪元素被认为是父元素内容的一部分，因此填充在内容和管道之外。尝试将填充添加到::after伪元素。

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

- cameronjonesweb

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>

- m4n0