Как сделать такой переключатель на css?

* { 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
.b { 
  text-align: center; 
} 
.b-inner { 
  display: inline-block; 
  vertical-align: top; 
  position: relative; 
  font-size: 0; 
} 
.b-item { 
  margin: 10px; 
  width: 100px; 
  min-height: 150px; 
  display: inline-block; 
  vertical-align: top; 
  border: 1px solid #ccc; 
  position: relative; 
  font-size: 16px; 
} 
.b-item:before { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 50%; 
  width: 70px; 
  margin-left: -35px; 
  height: 2px; 
  background: #555; 
} 
.b-line { 
  position: absolute; 
  top: 10px; 
  left: 25px; 
  width: 70px; 
  height: 4px; 
  background: green; 
  transition: 0.5s linear; 
} 
.b-item:nth-of-type(2):hover ~ .b-line { 
  left: calc(100px + 45px); 
} 
.b-item:nth-of-type(3):hover ~ .b-line { 
  left: calc(200px + 65px); 
}

<div class="b"> 
  <div class="b-inner"> 
    <div class="b-item"> 
 
    </div> 
    <div class="b-item"> 
 
    </div> 
    <div class="b-item"> 
 
    </div> 
    <div class="b-line"></div> 
  </div> 
</div>