yaru yaru - 1 month ago 6
CSS Question

How to make vertical lines between list items using CSS?

I am referring to these lines: http://prntscr.com/d44uuk
I want them to have dynamic height - so if I decide to change vertical distance between

<li>
elements - they will resize automatically.

Here's my 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

This will work with dynamic content and no extra DOM has been used. Give a try

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>