How do I make such a switch to css?

Question

How do I make such a switch to css?

You need to code such a switch to css+html. The indicator should jump - the upper green bar:

2

html css вёрстка веб-дизайн

Author: VaskM, 2017-01-10

Source

1 answers

score 4 · Accepted Answer

* {
  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>

Example Fiddle