Timeline slider horizontal line middle

Question

how can I achieve this horizontal line for atleast tablet and desktop version? I have tried many times but failed.

Answer 1

Probably something along these lines, although this is just a rough answer it would need a lot more CSS to style it like the above:

HTML:

<div class="container">
  <div class="line"></div>
  <ul>
    <li>

    </li>
  </ul>
</div>

CSS:

.container {
  background: grey;
  position: relative;
}
.line {
    position: absolute;
    width: 100%;
    z-index: 1;
    height: 1px;
    top: 50%;
    background: white;
 }
 ul {
    position: relative;
    z-index: 2;
    color: white;
    list-style: none;
    text-align: center;
 }
 li {
    display: inline-block;
    background: red;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 0 20px;
 }

Here's a fiddle - http://jsfiddle.net/d7yd7L5d/

Answer 2

You can use :before or :after selectors

HTML

<div id="timeline">
  <ul>
    <li>
      Your Circle Code
    </li>
  </ul>
</div>

CSS

#timeline li::before {
  background: #fff;
  content: " ";
  height: 1px;
  left: 100%;
  position: absolute;
  top: 50%;
  width: 100%;
}