Html 使用css伪元素沿项目符号创建垂直边框

我想让元素列表如下所示：

每个主标题的左边应该有一个项目符号，然后是一条水平线。水平线应该连接到垂直线，垂直线应该沿着内容的长度。内容将是可变的

前一个项目符号的垂直线应连接到下一个项目符号的垂直线。 最后一个项目符号的内容不应具有沿内容的垂直线

以下是我尝试过的：

。项目列表{
宽度：100%；
}
.物品清单.物品{
浮动：左；
线高：16px；
边缘底部：10px；
文本对齐：左对齐；
显示：内联块；
填充：0 18px；
字体大小：13px；
}
.项目列表.项目.项目标签{
字体大小：粗体；
文本转换：大写；
字体大小：13px；
}
.项目列表.项目.项目标签：之前{
内容：'\26AB'；
字体大小：10px；
左边距：-17px；
右侧填充：5px；
}

子弹1
项目符号1的可变长度文本
子弹2
项目符号2的可变长度文本
项目3
项目符号3的可变长度文本

类似的东西

。项目列表{
位置：相对位置；
左侧填充：10px；
宽度：100%；
左边框：1px纯黑；
}
.物品清单.物品{
位置：相对位置；
线高：16px；
边缘底部：10px；
文本对齐：左对齐；
显示：块；
填充：0 18px；
字体大小：13px；
}
.项目列表.项目：之前{
内容：“；
位置：绝对位置；
顶部：8px；
左：-10px；
宽度：12px；
高度：1px；
背景：#000；
}
.项目列表.项目：第一个子项：之后{
内容：“；
位置：绝对位置；
顶部：0px；
左-12px；
宽度：5px；
高度：8px；
背景：#fff；
}
.项目列表.项目：最后一个子项：之后{
内容：“；
位置：绝对位置；
顶部：9px；
底部：0；
左-12px；
宽度：5px；
背景：#fff；
}
.项目列表.项目.项目标签{
位置：相对位置；
字体大小：粗体；
文本转换：大写；
字体大小：13px；
颜色：#0077cc；
}
.项目列表.项目.项目标签：之前{
内容：''；
位置：绝对位置；
顶部：2个；
左-16px；
宽度：13px；
高度：13px；
边界半径：100%；
背景#0077cc；
}

子弹1
项目符号1的可变长度文本
此处还有一些文本
子弹2
项目符号2的可变长度文本
项目3
项目符号3的可变长度文本
第二行

类似的东西

。项目列表{
位置：相对位置；
左侧填充：10px；
宽度：100%；
左边框：1px纯黑；
}
.物品清单.物品{
位置：相对位置；
线高：16px；
边缘底部：10px；
文本对齐：左对齐；
显示：块；
填充：0 18px；
字体大小：13px；
}
.项目列表.项目：之前{
内容：“；
位置：绝对位置；
顶部：8px；
左：-10px；
宽度：12px；
高度：1px；
背景：#000；
}
.项目列表.项目：第一个子项：之后{
内容：“；
位置：绝对位置；
顶部：0px；
左-12px；
宽度：5px；
高度：8px；
背景：#fff；
}
.项目列表.项目：最后一个子项：之后{
内容：“；
位置：绝对位置；
顶部：9px；
底部：0；
左-12px；
宽度：5px；
背景：#fff；
}
.项目列表.项目.项目标签{
位置：相对位置；
字体大小：粗体；
文本转换：大写；
字体大小：13px；
颜色：#0077cc；
}
.项目列表.项目.项目标签：之前{
内容：''；
位置：绝对位置；
顶部：2个；
左-16px；
宽度：13px；
高度：13px；
边界半径：100%；
背景#0077cc；
}

子弹1
项目符号1的可变长度文本
此处还有一些文本
子弹2
项目符号2的可变长度文本
项目3
项目符号3的可变长度文本
第二行

非常感谢你，安迪。这正是我想要的。我们必须整合这一点。如果一切正常，那么我会接受答案，否则会麻烦你问更多。现在投票：）非常感谢你，安迪。这正是我想要的。我们必须整合这一点。如果一切正常，那么我会接受答案，否则会麻烦你问更多。现在投票：）