使用css伪元素

Question

我想制作一个如下所示的元素列表：

每个主标题的左侧应有一颗子弹，然后是水平线。水平线应连接到垂直线，垂直线应沿内容的长度方向运行。内容将是可变的。

前一个项目符号的垂直线应该连接到下一个项目符号的垂直线。 最后一个子弹的内容不应该沿着内容运行垂直线。

以下是我的尝试：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

结果是：

有没有办法实现水平线连接到内容的垂直边框而不打破内容的项目符号？谢谢您的帮助。

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>