html - 如何使用 CSS 在列表项之间制作垂直线？

Question

我指的是这些行:http://prntscr.com/d44uuk我希望它们具有动态高度 - 所以如果我决定更改 <li> 之间的垂直距离元素 - 它们会自动调整大小。

这是我的 fiddle : https://jsfiddle.net/v6ccgkwo/

ul {
  list-style: none;
}

ul li {
  margin-bottom: 40px;
}

ul li span {
  border-radius: 50%;
  border: 1px dashed black;
  padding: 5px 10px;
  margin-right: 10px;
}

<ul>
  <li><span>1</span>Легко устанавливается на сайт</li>
  <li><span>2</span>Следит за поведением посетителей</li>
  <li><span>3</span>Замечает, когда они тянут курсор к крестику, намереваясь уйти</li>
  <li><span>4</span>И показывает всплывающее окно с заманчивым предложением</li>  
</ul>

Answer 1

这将适用于动态内容，并且没有使用额外的 DOM。试一试

ul {
  list-style: none;
}

ul li {
  padding-bottom: 40px;
  position:relative
}

ul li span {
  border-radius: 50%;
  border: 1px dashed black;
  padding: 5px 10px;
  margin-right: 10px;
  background:#fff
}
ul li span:before{
  content:'';
  position:absolute;
  border-left:1px solid ;
  left:14px;
  bottom:0;
  z-index:-1;
  height:100%
}

ul li:last-child span:before{
 content:none;
}
ul li:last-child{
  padding-bottom:0
}

<ul>
<li><span>1</span>Легко устанавливается на сайт</li>
<li><span>2</span>Следит за поведением посетителей</li>
<li><span>3</span>Замечает, когда они тянут курсор к крестику, намереваясь уйти</li>
<li><span>4</span>И показывает всплывающее окно с заманчивым предложением</li>
  </ul>