我想在list标签前后添加一条垂直线。垂直线前的第一个列表标记不起作用

在HTML中，可以使用CSS来为列表标签添加垂直线。具体做法是通过为列表项（li）添加伪元素（::before或::after），并设置其样式为垂直线。

以下是一个示例代码：

HTML代码：

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

CSS代码：

.vertical-line-list li::before {
  content: "";
  border-left: 1px solid black;
  height: 100%;
  position: absolute;
  left: 0;
}

解释：

• 通过为列表项的伪元素（::before）设置content属性为空，创建一个空的伪元素。
• 设置伪元素的border-left属性为1px实线黑色边框，实现垂直线的效果。
• 设置伪元素的height属性为100%，使垂直线的高度与列表项相同。
• 设置伪元素的position属性为absolute，使其相对于列表项进行定位。
• 设置伪元素的left属性为0，使垂直线位于列表项的最左侧。

通过以上代码，可以在列表项前添加一条垂直线。第一个列表标记不起作用是因为伪元素是在列表项内部添加的，而不是在列表标记上添加的。

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

• 腾讯云官网：https://cloud.tencent.com/
• 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
• 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
• 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
• 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
• 腾讯云移动开发（移动推送、移动分析、移动测试等）：https://cloud.tencent.com/product/mobile
• 腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
• 腾讯云元宇宙（Tencent Real-Time Rendering）：https://cloud.tencent.com/product/trr