如何使用css在列表项旁边添加垂直线

在使用CSS在列表项旁边添加垂直线时，可以通过伪元素和CSS属性来实现。以下是一种常见的方法：

首先，给列表项的父元素添加一个自定义类名，例如"list-container"。

<ul class="list-container">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

接下来，在CSS中为该类名添加样式，并使用伪元素::before或::after来创建垂直线。

.list-container {
  list-style: none;
  padding: 0;
}

.list-container li {
  position: relative;
  padding-left: 20px; /* 调整垂直线与文本之间的距离 */
  margin-bottom: 10px; /* 调整列表项之间的间距 */
}

.list-container li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px; /* 调整垂直线的宽度 */
  height: 100%; /* 垂直线的高度与列表项高度一致 */
  background-color: #000; /* 调整垂直线的颜色 */
}

通过以上CSS样式，每个列表项都会在其左侧添加一条垂直线。你可以根据需要调整垂直线的宽度、颜色和与文本的距离。

这种方法适用于任何类型的列表，无论是有序列表（<ol>）还是无序列表（<ul>）。它可以用于各种场景，如导航菜单、侧边栏等。

腾讯云相关产品和产品介绍链接地址：