如何使用 after 元素制作 Last-child 元素答案

【问题标题】：How to make the Last-child element with the after element如何使用 after 元素制作 Last-child 元素
【发布时间】：2018-02-08 09:52:54
【问题描述】：

我需要在菜单的两侧画线，如下所示，我用伪元素试过这个

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

【问题讨论】：

什么不起作用？发生了什么？
show html .. 顺便说一句，像这样使用浮点数不是个好主意

标签： html css pseudo-element

【解决方案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>

【讨论】：