How to make vertical lines between list items using CSS?


Tags: html,css,html5,css3

Problem :

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>



Solution :

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>


    CSS Howto..

    How to achieve this header with html and css?

    How to fix “Blocked loading mixed active content” for css and js over https

    How to get a div positioned at the bottom of a table

    How to make the green DIV fit right after 2 upper divs?

    How to apply css transform on iOS without using -webkit-transform?

    How to ensure updated files are served instead of cached ones?

    How to specify the system’s default serif and sans-serif font-family?

    How to restrict the css star selector * to a class and all decendants?

    how do you change the color of nav bar

    How do you apply a fading overlay to an image in CSS?

    How to trim off Image in CSS?

    How can you remove the table-tags in CreateUserWizard control

    Control Show/Hide multiple DIV using CSS, Javascript, and Anchor without unique ID

    How to make a CSS div set auto height to content

    How to CSS style angular directive?

    How to add my custom css class to a html element

    How can I force a dynamic
      to be 100% the height of it's parent, no more, no less?

    How to design “overflowing” border lines of css
    ?

    How to change the colors of HTML form elements displayed in UIWebView?

    How to make a CSS transition work “backwards”?

    Bootstrap tooltip showing behind modal window

    How to solve this weird issue in html table and css.

    How to give cross browser transparency to element's background only?

    How to reference embedded images from CSS?

    How to vertically align both image and text in a DIV using CSS?

    How to replace borders around modal window in Fancybox 2.1.5?

    How to Make Auto Size Horizontal Line DIV using css?

    How to manage multiple css files in rails 4?

    How can I make the side elements spin on the x-axis in this animation?

    how to tag multiple elements? [closed]