如何使用after元素创建Last-child元素

Question

我需要在下面的菜单两侧制作线条， 我用伪元素

尝试了这个

li:before {
content: "";
width: 2px;
height: 27px;
background-color: white;
float: left;
margin-top: 14px;
}

该行出现在菜单的左侧，但我也需要在联系人的右侧有一条线。我尝试了下面的代码，但没有用。

li:last-child:after {
content: "";
width: 2px;
height: 27px;
background-color: white;
float: right;
margin-top: 14px;
}

Answer 1

就我个人而言，我不会像你一样使用伪元素。我给li项留下了一个边框（最后一个也是正确的）。可能有一种更清洁的方式，但这已经比你的方法短很多了，我猜它就可以了。

ul {
  display: flex;
  background-color: blue;
  padding: 10px;
}

li {
  padding-left:10px;
  color: white;
  margin: 0 10px;
  list-style: none;
  border-left: 2px solid white;
}

li:last-child {
  padding-right: 10px;
  border-right: 2px solid white;
}

<ul>
  <li>HOME</li>
  <li>PROJECTS</li>
  <li>INFO</li>
  <li>CONTACT</li>
</ul>