给出反映上层阶级的悬停效果

Question

现在这是想要有2个col我在主div宽度50％上给出了border-bottom类型所以它只覆盖了第一部分现在这是我想要的，当我将第二个颜色悬停时：hover应该触发上层阶级和移动边距 - 左边50％或说浮动：右边反之亦然

＆＃13;

＆＃13;

.special-row {
  background-color: #f4f4f4;
  border: 1px solid #b3b3b3;
  border-bottom: 0;
  padding: 15px 30px;
  text-align: center;
}

.special-row:after {
  content: '';
  display: block;
  width: 50%;
  background-color: #0577ad;
  height: 1px;
}

.special-row .hover-2:hover>.special-row:after {
  margin-left: 50%;
}

.special-row .hover-1:hover>.special-row:after {
  margin-left: 0;
}

＆＃13;

<div class="row special-row">
  <div class="col-lg-6 hover-1">
    One
  </div>
  <div class="col-lg-6 hover-2">
    Two
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;