[分享]css两个点之间画竖线

CSS中常常需要用到在两个点之间画一条竖线的效果，比如在网页的侧边栏或导航栏中。下面我们来看看如何实现这种效果。.line { borderleft: 1px solid 000; height: 2...

CSS中常常需要用到在两个点之间画一条竖线的效果，比如在网页的侧边栏或导航栏中。下面我们来看看如何实现这种效果。

.line {
  border-left: 1px solid #000;
  height: 20px;
  margin: 0 10px;
} 

以上代码就是画一条1像素宽的黑色竖线，并设置高度为20像素和左右间距为10像素的一个CSS类。在HTML中直接使用该类即可实现竖线的效果。

<div class="side-nav">
  <ul>
    <li>首页</li>
    <li class="line"></li>
    <li>关于我们</li>
    <li class="line"></li>
    <li>联系我们</li>
  </ul>
</div> 

在以上HTML代码中，我们为需要添加竖线的列表项添加了CSS类line，这样就可以实现在每个竖线后面添加列表项的效果。

值得注意的是，如果需要在最后一个列表项后面隐藏竖线，可以通过CSS选择器:last-child来实现。

.line:last-child {
  border-left: none;
} 

以上代码即为选择具有.line类的最后一个元素，并将它的border-left属性设置为none，这样就可以隐藏最后一个竖线。

以上就是关于在CSS中如何实现在两个点之间或列表项之间添加竖线的方法。希望对大家的开发工作有所帮助。