伪元素不显示在第n个孩子中

Question

我正在玩一个小的导航菜单和伪元素，我想知道为什么我创建的微小的浅橙色方块显示在第一个子元素上，而不是其他元素被复制并放入第n个元素时子（2）。

＆＃13;

＆＃13;

body {
  margin: 0;
}
* {
  margin: 0;
  padding: 0;
}
#orangeNavBar {
  height: 45px;
  width: 627px;
  background-color: #E87966;
  margin-left: auto;
  margin-right: auto;
  margin-top: 15px;
}
ul {
  list-style: none;
}
ul li {
  float: left;
  font-family: times new roman;
  font-size: 1.1em;
  font-weight: bold;
  color: black;
  height: 45px;
  box-sizing: border-box;
  padding: 10px 20px;
  border: 1px solid black;
}
ul li:first-child::after {
  content: "";
  height: 8px;
  width: 8px;
  background: #F1BAAF;
  display: block;
  float: right;
  position: relative;
  left: 20px;
  top: 7.5px;
}
ul li:nth-child(2)::after {
  content: "";
  height: 8px;
  width: 8px;
  background: #F1BAAF;
  display: block;
  float: right;
  position: relative;
  left: 20px;
  top: 7.5px;
}

＆＃13;

<div id="orangeNavBar">
  <ul>
    <li>Home</li>
    <li>Products</li>
    <li>Company</li>
    <li>Contact</li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

由于

ul li:nth-child(2)::after

仅选择第二项

你需要

ul li:nth-child(n+2)::after

每个子

body {
  margin: 0;
}
* {
  margin: 0;
  padding: 0;
}
#orangeNavBar {
  height: 45px;
  background-color: #E87966;
  margin-left: auto;
  margin-right: auto;
  margin-top: 15px;
}
ul {
  list-style: none;
}
ul li {
  float: left;
  font-family: times new roman;
  font-size: 1.1em;
  font-weight: bold;
  color: black;
  height: 45px;
  box-sizing: border-box;
  padding: 10px 20px;
  border: 1px solid black;
}
ul li:first-child::after {
  content: "";
  height: 8px;
  width: 8px;
  background: #F1BAAF;
  display: block;
  float: right;
  position: relative;
  left: 20px;
  top: 7.5px;
}
ul li:nth-child(n+2)::after {
  content: "";
  height: 8px;
  width: 8px;
  background: #F1BAAF;
  display: block;
  float: right;
  position: relative;
  left: 20px;
  top: 7.5px;
}

<div id="orangeNavBar">
  <ul>
    <li>Home</li>
    <li>Products</li>
    <li>Company</li>
    <li>Contact</li>
  </ul>
</div>