How to create simple Horizontal Timeline

Question

I can't make these with HTML + CSS:

I try everything...with :before, with: after, but i really can't make it.

I make a JsFiddle demo.

Demo

How can i make this? Do you have idea?

Other question: This can be resonsive too? (I think not...:()

Code (CSS):

    .container {
  width:1025px;
  display:block;
  height:400px;
}
.container:before{
  content:'';
  width:1025px;
  height:15px;
  background-color:blue;
  display:block;
  position:absolute;
  top:20%;
}

.container div{
  display:inline-block;
  float:left;
  background-size: 22px 22px;
  padding-left:22px;

}

.container div.span:before{
  content:'';
   background:url('http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/firey-orange-jelly-icons-alphanumeric/070242-firey-orange-jelly-icon-alphanumeric-information3-sc49.png');
  background-repeat:no-repeat;
  background-position:left;
  display:block;
  width:22px;
  height:22px;
      background-size: contain;
}

.container div.down:after{
  content:'';
   background:url('http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/firey-orange-jelly-icons-alphanumeric/070242-firey-orange-jelly-icon-alphanumeric-information3-sc49.png');
  background-repeat:no-repeat;
  background-position:left;
  display:block;
  width:22px;
  height:22px;
      background-size: contain;
}

Code(HTML):

<div class="container">
  <div class="span">Lorem ipsum</div>
  <div class="down">Dolor sit amet</div>
  <div class="span">Lorem ipsum</div>
  <div class="down">Lorem ipsum dolor sit amet</div>
  <div class="span">Lorem ipsum</div>
  <div class="down">Lorem</div>
  <div class="span">Lorem ipsum dolor</div>
  <div class="down">Lorem</div>
  <div class="span">Lorem ipsum dolor</div>
  <div class="down">Lorem ipsum</div>
  <div class="span">Lorem ipsum dolor</div>
  <div class="down">Lorem ipsum</div>
</div>

Answer 1

Try this https://jsfiddle.net/hf19qbg2/16/

Preview

.container {
  width:80%;
  display:block;
  margin-top: 100px;
  margin-left: 100px;
}

.line {
  width: 100%;
  background: blue;
  margin: 50px 0;
  height: 5px;
}

.top,
.bottom {
  display: flex;
  flex-direction: row;
}

.bottom {
  padding-left: 50px;
}

.top .top-element,
.bottom .bottom-element {
  padding: 0 25px;
  position: relative;
}

.top-element:before,
.bottom-element:before {
  content: "I";
  height: 20px;
  width: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  background: #C33900;
  color: white;
  position: absolute;
  left: 0;
}

.top-element:before {
  bottom: -63px;
}

.bottom-element:before {
  top: -63px;
}

.top-element:after,
.bottom-element:after {
  content: "";
  height: 50px;
  width: 2px;
  background: #8ACCC6;
  position: absolute;
}

.top-element:after {
  left: 10px;
  bottom: -40px;
}

.bottom-element:after {
  left: 10px;
  top: -40px;
}

HTML

<div class="container">

  <div class="top">
    <div class="top-element">Lorem top 1</div>
    <div class="top-element">Lorem top 2</div>
    <div class="top-element">Lorem top 3</div>
    <div class="top-element">Lorem top 4</div>
  </div>

    <div class="line"></div>

  <div class="bottom">
    <div class="bottom-element">Lorem bottom 1</div>
    <div class="bottom-element">Lorem bottom 2</div>
    <div class="bottom-element">Lorem bottom 3</div>
    <div class="bottom-element">Lorem bottom 4</div>
  </div>

</div>

Answer 2

Find an elegant and simple example that I have created HERE. I have used ul and li tags to do the job quicker. To change the number of items, you just need to deal with the number of li tags you have.

HTML:

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

CSS:

* {
  box-sizing: border-box;
}
.container {
  background: #0048FF;
  position: relative;
  margin-top: 100px;
  width: 500px;
  height: 20px;
  border-radius: 20px;
}

li {
  text-decoration: none;
  position: relative;
  display: inline-block;
  margin: 0 30px;
  padding: 5px 11px;
  top: -3px;
  background: #e59741; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #e59741 21%, #c22d0b 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  #e59741 21%,#c22d0b 100%); /*     Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  #e59741 21%,#c22d0b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e59741', endColorstr='#c22d0b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient     */
  border-radius: 50%;
  color: white;
  font-size:14px;
}
li:nth-child(2n+1):after {
  content:"\00a0\00a0number1\00a0number3";
  position: absolute;
  padding: 0 0 20px 0;
  color: black;
  top: -50px;
  bottom: 25px;
  left: 12px;
  border-left: 2px solid #9CD4CF;
}

li:nth-child(2n):after {
  content: "\00a0\00a0number1\00a0number2";
  position: absolute;
  padding: 30px 0 0px 0;
  color: black;
  top: 25px;
  left: 12px;
  border-left: 2px solid #9CD4CF;
}

Answer 3

A description of the specifics would take a while so I'll just make a brief demo of one method which would seem to be something along the lines of what you seem to be after.

The code id quite inefficient (and non-responsive at the moment) but I hope the basics are enough to see you along the way.

.timeline {
  height: 250px;
  margin: 1em;
  line-height: 250px;
  position: relative;
  text-align: center;
}
.timeline:before {
  content: '';
  position: absolute;
  width: 80%;
  top: 50%;
  left: 10%;
  height: 26px;
  margin-top: -13px;
  background: red;
}
.event {
  width: 50px;
  height: 50px;
  position: relative;
  margin: 0 50px;
  display: inline-block;
  background: blue;
  vertical-align: middle;
  border-radius: 50%;
}
.detail {
  position: absolute;
  line-height: 1em;
  white-space: nowrap;
  left: 100%;
}
.event:before {
  content: '';
  position: absolute;
  left: 50%;
  margin-left: -3px;
  width: 6px;
  background: green;
  height: 50px;
}
.event.up:before {
  top: -100%;
}
.event.down:before {
  top: 100%;
}
.up .detail {
  top: -50px;
}
.down .detail {
  bottom: -50px;
}

<div class="timeline">
  <div class="event up">
    <div class="detail">Lorem ipsum dolor.</div>
  </div>
  <div class="event down">
    <div class="detail">lorem</div>
  </div>
  <div class="event up">
    <div class="detail">Lorem ipsum dolor sit amet</div>
  </div>
</div>