Using the :: before pseudo element on UL to create a timeline view

Question

I would like to get a visual plotline layout using li elements inside ul , which would look like this:

 li-element1 . . li-element2 . . li-element3 

I use the ::before pseudo-element to add a line through the entire ul element, but it is visible on top of the li elements that I don't want to do. How can I bind a string to li and are visible only between field breaks? I have already unsuccessfully tried the Z-index property. here is a link to a pen with my current code.

 .container ul{ position: relative; } .container ul::before{ content: ""; position: absolute; top: 0px; bottom: 0px; border: 1px dashed blue; } .container ul li{ margin: 15px; } 

 <div class="container"> <ul> <li>First</li> <li>Second</li> <li>Third</li> <li>Fourth</li> </ul> </div> 

Update

In the original question, I did not pay attention to the fact that the bullets in the li elements are not actually part of the li element itself and, therefore, are not actually affected by any set of background colors set for them. Now, keeping in mind and offering answers, combining the use of z-index, background-color, margin and paddings and additionally setting ul list-style-type: none , I updated the code to:

 .container ul{ padding: 0px; margin: 0px; position: relative; list-style-type: none; } .container ul::before{ content: ""; position: absolute; top: 0px; bottom: 0px; left: 16px; border: 1px dotted red; } .container ul li{ margin: 15px; padding: 0px 0px; position: relative; z-index: 1; background-color: white; } 

 <div class="container"> <ul> <li>• First</li> <li>• Second</li> <li>• Third</li> <li>• Fourth</li> </ul> </div> 

Answer 1

You can use white background, padding, and relative positioning to hide part of the timeline with each element:

 .container ul{ position: relative; } .container ul::before{ content: ""; position: absolute; top: 0px; bottom: 0px; border: 1px dashed red; } .container ul li { display: block; position: relative; left: -20px; background-color: white; padding: 5px; padding-left: 20px; margin: 40px 0px; } 

 <div class="container"> <ul> <li>First</li> <li>Second</li> <li>Third</li> <li>Fourth</li> </ul> </div> 

Answer 2

Remove the list icons and replace them with pseudo-elements: http://codepen.io/anon/pen/qRMZyy

 .container ul{ position: relative; list-style: none; } .container ul::before{ content: ""; position: absolute; top: 0px; bottom: 0px; z-index:100; border: 1px dashed blue; } .container ul li { margin: 15px; position: relative; } .container ul li:before { content: ""; height: 10px; width: 10px; border-radius: 100%; background: #000; display: inline-block; position: absolute; top: 5px; z-index: 0; left: -20px; } 

Answer 3

z-index should work fine. You have two options: negative z-indez on the line or positive z-index on <li> s.

Negative z-index:

 .container ul{ position: relative; z-index: 1; } .container ul::before{ content: ""; position: absolute; top: 0px; bottom: 0px; border: 1px dashed blue; z-index: -1; } .container ul li{ margin: 15px; } body {background: #888;} .container ul::before {border-color: #000;} .container ul li {color: #FFF;} 

 <div class="container"> <ul> <li>First</li> <li>Second</li> <li>Third</li> <li>Fourth</li> </ul> </div> 

Positive z-index:

 .container ul{ position: relative; } .container ul::before{ content: ""; position: absolute; top: 0px; bottom: 0px; border: 1px dashed blue; } .container ul li{ margin: 15px; position: relative; z-index: 1; } body {background: #888;} .container ul::before {border-color: #000;} .container ul li {color: #FFF;} 

 <div class="container"> <ul> <li>First</li> <li>Second</li> <li>Third</li> <li>Fourth</li> </ul> </div> 

Answer 4

One method is to place borders on children of the pseudo-element of the <li> elements instead of the <ul> element. This is probably not the best method.

 .container ul{ position: relative; } .container ul li{ margin: 2px; } .container ul li::after, .container ul li::before { content:" "; border-left: 1px dashed blue; display: block; position: relative; left: -12px; top: 0; height: 12px; } .container ul li:last-child::after, .container ul li:first-child::before { content:""; display: none; } 

 <div class="container"> <ul> <li>First</li> <li>Second</li> <li>Third</li> <li>Fourth</li> </ul> </div>