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

Question

I was playing around with a little nav menu and pseudo elements and I was wondering why the tiny light orange square I have created displays on the first child element but not the other elements when it is copied over and put in the nth-child(2).

 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; } 

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

Answer 1

Because

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

only selects the second item

You need

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

so each child after the first one is selected.

 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>