CSS - Vertical Line Between Bullets in an Unordered List

CSS - Vertical line between bullets in an unordered list

I doubt that this is achievable using just borders and "fiddling with margins" as others have suggested, at least I've had no luck in doing so.

This solution uses CSS-generated content (:before and :after) to draw bullets and lines. It allows for
a high degree of customization and it keeps the markup clean, but note the browser support.

JSFiddle (scroll through CSS until the /* BORDERS AND BULLETS */ comment)

ul.experiences li {
    position:relative; /* so that pseudoelements are positioned relatively to their "li"s*/
    /* use padding-bottom instead of margin-bottom.*/ 
    margin-bottom: 0; /* This overrides previously specified margin-bottom */
    padding-bottom: 2.5em;
}

ul.experiences li:after {
    /* bullets */
    content: url('http://upload.wikimedia.org/wikipedia/commons/thumb/3/30/RedDisc.svg/20px-RedDisc.svg.png');
    position: absolute;
    left: -26px; /*adjust manually*/
    top: 0px;
}

ul.experiences li:before {
    /* lines */
    content:"";
    position: absolute;
    left: -16px; /* adjust manually */
    border-left: 1px solid black;
    height: 100%;
    width: 1px;
}

ul.experiences li:first-child:before {
   /* first li's line */
   top: 6px; /* moves the line down so that it disappears under the bullet. Adjust manually */
}

ul.experiences li:last-child:before {
    /* last li's line */
   height: 6px; /* shorten the line so it goes only up to the bullet. Is equal to first-child:before's top */
}

NOTE: if the line's border-color has an alpha-channel specified, the overlap between first and second elements' borders will be noticeable.

How to show sets of a project by vertical line and bullet buttons

You can get sort of crazy but you can do it. I don't know if I would suggest this code for a lot of situations, since it's "delicate" and I suspect could be easily disrupted.

.time-chart {  font-family: Arial, sans-serif;  font-size: 12px;}
h3.start {  border: 0;  border-radius: 15px;  background: blue;  color: white;  display: inline-block;  font-weight: normal;  font-family: Arial, sans-serif;  font-size: 12px;  padding: .75em;  margin: 0;  margin-left: 105px;}
ul.timeline {  padding-left: 170px;  margin-top: -6px;}
ul.timeline li {  padding-left: 0;  margin-bottom: 2.5em;  list-style: none;}
.event {  font-size: 1em;  display: inline-block;  margin-left: -160px;  font-weight: bold;}
.event:after {  content: "•";  color: blue;  background: white;  border: 1px solid blue;  width: 10px;  height: 10px;  border-radius: 50%;  position: absolute;  left: -21px;  line-height: 12px;  text-align: center;  vertical-align: middle;}
.description {  display: block;  margin-top: -12px;  padding-left: 10px;}

/* BORDERS AND BULLETS */
p {  /*CSS reset*/  margin-bottom: 0;}
ul.timeline li {  position: relative;  /* so that pseudoelements are positioned relatively to their "li"s*/  /* use padding-bottom instead of margin-bottom.*/  margin-bottom: 0;  /* This overrides previously specified margin-bottom */  padding-bottom: 2.5em;}
ul.timeline li:after {  /* bullets */  content: "";}
ul.timeline li:before {  /* lines */  content: "";  position: absolute;  left: -16px;  /* adjust manually */  border-left: 1px solid blue;  height: 100%;  width: 1px;}
ul.timeline li:first-child:before {  /* first li's line */  top: 6px;  /* moves the line down so that it disappears under the bullet. Adjust manually */}
ul.timeline li:last-child:before {  /* last li's line */  height: 6px;  /* shorten the line so it goes only up to the bullet. Is equal to first-child:before's top */}

<div class="time-chart ui-widget">  <h3 class="start">Journey Begins</h3>  <ul class="timeline">    <li> </li>    <li>      <div class="event">New Product Launch</div>      <p class="description">Jelly-o pie chocolate cake...</p>    </li>    <li class="green">      <div class="event">New York Times</div>      <p class="description">Jelly-o pie chocolate cake...</p>    </li>    <li class="green">      <div class="event">New York Times</div>      <p class="description">Jelly-o pie chocolate cake...</p>    </li>    <li> </li>  </ul></div>

CSS: custom bullets: joined as timeline

You can use pseudo-elements for this, one for circle and other one for the line, and :not(:last-child) so you don't set line on last element.

ul {  list-style: none;}li {  position: relative;  padding: 10px;}li a {  color: gray;}li:before {  content: '';  width: 16px;  height: 16px;  border-radius: 50%;  background: #D8D8D8;  position: absolute;  left: -15px;  top: 50%;  transform: translateY(-40%);}
li:not(:last-child):after {  content: '';  width: 2px;  height: 100%;  background: #D8D8D8;  position: absolute;  left: -8px;  top: 50%;}

<ul class="timeline">  <li><a href="">asd as</a></li>  <li><a href="">werwer we</a></li>  <li><a href="">werwer we</a></li></ul>

How to make vertical lines between list items using CSS?

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>

How to connect mark's of list with line?

This took me a while.. but I managed to (hard code) a line between the dots.

li:before draws a line between all dots with the height of 30px.

I'd suggest using Less or SASS to make this more dynamic.

    .my-cv {      list-style-type: desc;          }
    .my-cv li {      color: #5dc5ef;    }
    .my-cv span {      color: black;    }
    li:before {      content: "";      position: absolute;      right: 33px;      border-left: 1px solid #5dc5ef;      width: 1px;      height: 30px; // change with my-cv.height in less    }
    li:first-child:before {      top: 23px;//Don't draw before first bullet    }
    li:last-child:before {      height: 6px; //Don't draw after last bullet    }

    <ul class="my-cv" dir="rtl">      <li class="first-child">        <span>                                                    1995-2001 בנגב בוגר הפקולטה לרפואה באוניברסיטת בן גוריון                                                </span>      </li>      <li>        <span>                                                    2002-2003 סטאז' בביה"ח כרמל בחיפה                                                </span>      </li>      <li>        <span>                                                    2007-2010, 2003-2006 התמחות בכירורגיה כללית בביה"ח "שיבא" בתל השומר
                                                </span>      </li>      <li>        <span>                                                    2010-2012 תת-התמחות בניתוחי קיצור קיבה בביה"ח "קליבלנד קליניק" בקליבלנד, אוהיו
                                                </span>      </li>    </ul>

CSS - Vertical Line Between Bullets in an Unordered List