Error when trying to create tabs using Css?

Question

  .container {
    width: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 0;
    box-shadow: 0 0 100px RGBa(0,0,0,0.5);
    border-radius: 3px;
    overflow: hidden;
    input {
      display: none;
      &:checked + label {
        background: #eee;
      }
      @for $i from 1 through 4 {
        &#tab#{$i}:checked {
          ~ .line {
            left: #{($i - 1) * 25%};
          }
          ~ .content-container #c#{$i} {
            opacity: 1;
          }
        }
      }
    }
    label {
      display: inline-block;
      font-size: 16px;
      height: 36px;
      line-height: 36px;
      width: 25%;
      text-align: center;
      background: #f4f4f4;
      color: #555;
      position: relative;
      transition: 0.25s background ease;
      cursor: pointer;
      &::after {
        content: "";
        height: 2px;
        width: 100%;
        position: absolute;
        display: block;
        background: #ccc;
        bottom: 0;
        opacity: 0;
        left: 0;
        transition: 0.25s ease;
      }
      &:hover::after {
        opacity: 1;
      }
    }
    .line {
      position: absolute;
      height: 2px;
      background: #1E88E5;
      width: 25%;
      top: 34px;
      left: 0;
      transition: 0.25s ease;
    }
  }

<div class="container">
  <input type="radio" id="tab1" name="tab" checked>
  <label for="tab1"> Features</label>
  <input type="radio" id="tab2" name="tab">
  <label for="tab2"> History</label>
  <input type="radio" id="tab3" name="tab">
  <label for="tab3">Reviews</label>
  <input type="radio" id="tab4" name="tab">
  <label for="tab4"> Share</label>
  <input type="radio" id="tab5" name="tab">
  <label for="tab5"> Share</label>
  <input type="radio" id="tab6" name="tab">
  <label for="tab6"> Share</label>
  <input type="radio" id="tab7" name="tab">
  <label for="tab7"> Share</label>
  <div class="line"></div>

</div>

I am working on the tabs with the help of css. Out of 7 tabs i am able to select only 4 tabs, and remaining 3 tabs are coming down in next line, and even unable to select and border radius also not applying.

Want to align all 7 tabs in one line, and apply border bottom color for all 7 tabs.

This is my codepen https://codepen.io/santoshch/pen/QWpLZYd

Answer 1

You have set fixed width of container, so that label is not feet in this width so that they are going down in next line.

1. To fixed you need to increase container width and set label width
2. Only 4 tabs working, because your for loop only looping 4 time you need to set 7 time

Here is working fiddle

.container {
  width: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0;
  box-shadow: 0 0 100px RGBa(0, 0, 0, 0.5);
  border-radius: 3px;
  overflow: hidden;
}
.container input {
  display: none;
}
.container input:checked + label {
  background: #eee;
}
.container input#tab1:checked ~ .line {
  left: 0%;
}
.container input#tab1:checked ~ .content-container #c1 {
  opacity: 1;
}
.container input#tab2:checked ~ .line {
  left: 14.28%;
}
.container input#tab2:checked ~ .content-container #c2 {
  opacity: 1;
}
.container input#tab3:checked ~ .line {
  left: 28.56%;
}
.container input#tab3:checked ~ .content-container #c3 {
  opacity: 1;
}
.container input#tab4:checked ~ .line {
  left: 42.84%;
}
.container input#tab4:checked ~ .content-container #c4 {
  opacity: 1;
}
.container input#tab5:checked ~ .line {
  left: 57.12%;
}
.container input#tab5:checked ~ .content-container #c5 {
  opacity: 1;
}
.container input#tab6:checked ~ .line {
  left: 71.4%;
}
.container input#tab6:checked ~ .content-container #c6 {
  opacity: 1;
}
.container input#tab7:checked ~ .line {
  left: 85.68%;
}
.container input#tab7:checked ~ .content-container #c7 {
  opacity: 1;
}
.container label {
  display: inline-block;
  font-size: 16px;
  height: 36px;
  line-height: 36px;
  width: 10.28%;
  text-align: center;
  background: #f4f4f4;
  color: #555;
  position: relative;
  transition: 0.25s background ease;
  cursor: pointer;
  padding: 0 10px;
}
.container label::after {
  content: "";
  height: 2px;
  width: 100%;
  position: absolute;
  display: block;
  background: #ccc;
  bottom: 0;
  opacity: 0;
  left: 0;
  transition: 0.25s ease;
}
.container label:hover::after {
  opacity: 1;
}
.container .line {
  position: absolute;
  height: 2px;
  background: #1e88e5;
  width: 14.28%;
  top: 34px;
  left: 0;
  transition: 0.25s ease;
}

<div class="container">
  <input type="radio" id="tab1" name="tab" checked>
  <label for="tab1"> Features</label>
  <input type="radio" id="tab2" name="tab">
  <label for="tab2"> History</label>
  <input type="radio" id="tab3" name="tab">
  <label for="tab3">Reviews</label>
  <input type="radio" id="tab4" name="tab">
  <label for="tab4"> Share</label>
  <input type="radio" id="tab5" name="tab">
  <label for="tab5"> Share</label>
  <input type="radio" id="tab6" name="tab">
  <label for="tab6"> Share</label>
  <input type="radio" id="tab7" name="tab">
  <label for="tab7"> Share</label>
  <div class="line"></div>

</div>