[分享]css上下两个li怎么显示竖线

在网页设计中，经常会遇到需要为上下两个li元素添加竖线的情况，这时候我们可以使用css的伪元素和边框属性来实现这一效果。 首先，在ul元素上添加一个类名，比如“line”，用来指定需要添加竖线的ul，...

在网页设计中，经常会遇到需要为上下两个li元素添加竖线的情况，这时候我们可以使用css的伪元素和边框属性来实现这一效果。
首先，在ul元素上添加一个类名，比如“line”，用来指定需要添加竖线的ul，然后给ul添加一个相对定位的定位方式，这样后面添加的竖线元素才能根据ul进行定位。

<ul class="line">
  <li>上面的内容</li>
  <li>下面的内容</li>
</ul> 

接下来，使用:before或:after伪元素来添加竖线。我们可以给:before或:after设置一个绝对定位，并将其宽度设置为1px，高度设置为100%（盒模型的高度），然后在样式中指定竖线位置和颜色。

.line li:before {
  content: ';
  position: absolute;
  top: 0;
  left: -1px;
  width: 1px;
  height: 100%;
  background-color: #000;
}
<br>
.line li:last-child:before {
  display: none;
}

注意，最后一个li元素不需要竖线，所以我们可以通过:last-child伪类来判断是否是最后一个元素，然后将竖线隐藏即可。
这样，我们就可以轻松实现css上下两个li显示竖线的效果了。