Каким образом вы бы это реализовали [требует правки]

* { 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
ul { 
  max-width: 650px; 
  margin: 30px auto; 
  list-style: none; 
  font-size: 16px; 
  text-align: center; 
  display: flex; 
  justify-content: space-between; 
  flex-wrap: wrap; 
  position: relative; 
} 
ul:before { 
  content: ''; 
  position: absolute; 
  top: 50%; 
  left: 0; 
  margin-top: -2px; 
  width: 100%; 
  height: 4px; 
  background: #C5FCC5; 
  z-index: -1; 
} 
ul > li { 
  margin: 15px 0; 
  color: #fff; 
  width: 80px; 
  height: 80px; 
  line-height: 80px; 
  background: #C5FCC5; 
  border-radius: 50%; 
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); 
  position: relative; 
} 
ul > li:first-child { 
  background: #6CEE5A; 
} 
ul > li:before { 
  content: ''; 
  position: absolute; 
  top: 50%; 
  right: -50%; 
  margin-top: -50px; 
  height: 100px; 
  width: 20px; 
  border: 1px solid #91E0E5; 
  border-bottom: none; 
  border-top: none; 
} 
ul > li:last-of-type:before { 
  display: none; 
} 
@media screen and (max-width: 600px) { 
  ul > li:before {    
    display: none; 
  } 
}

<ul> 
  <li>2016</li> 
  <li>2015</li> 
  <li>2014</li> 
  <li>2013</li> 
  <li>2012</li> 
</ul>

.cell{ 
  display: inline-block; 
  padding: 15px 18px; 
  border-left: 1px solid cyan; 
  border-right: 1px solid cyan; 
  position: relative; 
 
} 
.wrapper{ 
  float:left; 
  padding: 0px 10px; 
} 
.cell > span{ 
  position: absolute; 
  top: calc(50% - 0.7em); 
  left: calc(50% - 1.1em); 
  color: white; 
  font-family: Arial; 
  font-size: 12px; 
} 
.cell > svg{ 
  height: 40px !important; 
  width: 40px !important; 
  fill: hsl(120, 80%, 90%); 
  stroke: green; 
  stroke-width: 0px; 
  transition: all 0.1s ease-in; 
  padding: 1px; 
  --opacity: 0.4; 
} 
.wrapper:hover > .cell > svg { 
  fill: lightgreen; 
} 
.super-wrapper{ 
  display: inline-block; 
  width: auto; 
} 
.super-wrapper:after{ 
  content: ''; 
  position: absolute; 
  display: block; 
  background-color: hsl(120, 80%, 90%); 
  height: 4px; 
  width: 200px; 
  top: 42px; 
  left: 40px; 
  z-index: -1; 
}

<div class='super-wrapper'> 
<div class='wrapper'> 
  <div class='cell'> 
    <span>2016</span> 
    <svg> 
      <circle cx='20' cy='20' r='20'/> 
    </svg> 
  </div> 
</div> 
<div class='wrapper'> 
  <div class='cell'> 
    <span>2015</span> 
    <svg> 
      <circle cx='20' cy='20' r='20'/> 
    </svg> 
  </div> 
</div> 
<div class='wrapper'> 
  <div class='cell'> 
    <span>2014</span> 
    <svg> 
      <circle cx='20' cy='20' r='20'/> 
    </svg> 
 
  </div> 
</div> 
 </div>