html - 使用 css 伪元素制作垂直边框和元素符号

Question

我想让一个元素列表看起来像这样:

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

前一个元素符号的垂直线应该连接到下一个元素符号的垂直线。最后一个元素符号的内容不应有垂直线。

这是我尝试过的:

.item-list {
  width: 100%;
}
.item-list .item {
  float: left;
  line-height: 16px;
  margin-bottom: 10px;
  text-align: left;
  display: inline-block;
  padding: 0 18px;
  font-size: 13px;
}
.item-list .item .item-label {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 13px;
}
.item-list .item .item-label:before {
  content: '\26AB';
  font-size: 10px;
  margin-left: -17px;
  padding-right: 5px;
}

<div class="item-list">

  <div class="item">
    <div class="item-label">
      Bullet 1
    </div>
    <div class="item-description">Variable length text for bullet 1</div>
  </div>
  <div class="item">
    <div class="item-label">
      Bullet 2
    </div>
    <div class="item-description">Variable length text for bullet 2</div>
  </div>
  <div class="item">
    <div class="item-label">
      Bullet 3
    </div>
    <div class="item-description">Variable length text for bullet 3</div>
  </div>
</div>

结果是:

有没有一种方法可以使水平线连接到内容的垂直边框而不与内容断开？谢谢您的帮助。

Answer 1

类似的东西？

.item-list {
  position: relative;
  padding-left: 10px;
  width: 100%;
  border-left: 1px solid black;
}
.item-list .item {
  position: relative;
  line-height: 16px;
  margin-bottom: 10px;
  text-align: left;
  display: block;
  padding: 0 18px;
  font-size: 13px;
}
.item-list .item:before {
  content: "";
  position: absolute;
  top: 8px;
  left: -10px;
  width: 12px;
  height: 1px;
  background: #000;
}
.item-list .item:first-child:after {
  content: "";
  position: absolute;
  top: 0px;
  left: -12px;
  width: 5px;
  height: 8px;
  background: #fff;
}
.item-list .item:last-child:after {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 0;
  left: -12px;
  width: 5px;
  background: #fff;
}
.item-list .item .item-label {
  position: relative;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 13px;
  color: #0077cc;
}
.item-list .item .item-label:before {
  content: ''; 
  position: absolute;
 top: 2px;
  left: -16px;
  width: 13px;
  height: 13px;
  border-radius: 100%;
  background: #0077cc;
}

<div class="item-list">

  <div class="item">
    <div class="item-label">
      Bullet 1
    </div>
    <div class="item-description">Variable length text for bullet 1<br>some more texte here</div>
  </div>
  <div class="item">
    <div class="item-label">
      Bullet 2
    </div>
    <div class="item-description">Variable length text for bullet 2</div>
  </div>
  <div class="item">
    <div class="item-label">
      Bullet 3
    </div>
    <div class="item-description">Variable length text for bullet 3<br>second line</div>
  </div>
</div>