如何移除激活状态Tab标签的底部边框？

问题描述 #

当前激活的Tab标签底部存在多余边框，需要移除该边框，实现干净的视觉衔接效果。

现状截图 #

期望效果截图 #

当前使用代码 #

CSS代码 #

h1 {
  padding: 100px 0;
  font-weight: 400;
  text-align: center;
}

p {
  margin: 0 0 20px;
  line-height: 1.5;
}

.main {
  margin: 0 auto;
  min-width: 320px;
  max-width: 800px;
}

.content {
  background: #fff;
  border: 1px solid rgb(217, 217, 217);
}

.content>div {
  display: none;
  padding: 20px 25px 5px;
}

input {
  display: none;
}

label {
  display: inline-block;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  background-color: rgb(240, 240, 240);
  border-top: 1px solid rgb(217, 217, 217);
  border-left: 1px solid rgb(217, 217, 217);
  border-right: 1px solid rgb(217, 217, 217);
}

label:hover {
  color: #DDD;
  cursor: pointer;
}

input:checked+label {
  background: #fff;
  color: #000;
  border-top: 1px solid rgb(217, 217, 217);
  border-left: 1px solid rgb(217, 217, 217);
  border-right: 1px solid rgb(217, 217, 217);
  border-bottom: 0px;
  position: relative;
}

input:checked+label::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background: #ccc;
  bottom: -1px;
  right: 0;
  left: 0;
  margin: auto;
}

#tab1:checked~.content #content1,
#tab2:checked~.content #content2,
#tab3:checked~.content #content3,
#tab4:checked~.content #content4 {
  display: block;
}

@media screen and (max-width: 400px) {
  label {
    padding: 15px 10px;
  }
}

HTML代码 #

<div class="main">
  <input id="tab1" type="radio" name="tabs" checked>
  <label for="tab1">纽约</label>

  <input id="tab2" type="radio" name="tabs">
  <label for="tab2">伦敦</label>

  <input id="tab3" type="radio" name="tabs">
  <label for="tab3">孟买</label>

  <input id="tab4" type="radio" name="tabs">
  <label for="tab4">东京</label>

  <div class="content">
    <div id="content1">
      <p>
        纽约，全称纽约市，以区别于纽约州，是美国人口最多的城市，也是纽约都会区的核心，是美国合法移民的主要门户，同时是世界上人口最稠密的城市集聚区之一。作为全球枢纽城市，纽约在商业、金融、媒体、艺术、时尚、研究、科技、教育和娱乐领域都具有重要影响力。
      </p>
      <p>
        纽约是联合国总部所在地，是重要的国际外交中心，被称为世界文化和金融之都。
      </p>
    </div>

    <div id="content2">
      <p>
        伦敦是英格兰和英国的首都，是英国人口最多的城市，都会区人口超过1300万。它位于泰晤士河畔，作为重要定居点已有两千年历史，其起源可追溯至罗马人建立的伦迪尼乌姆。
      </p>
      <p>
        伦敦的古老核心——伦敦市，大致保留了其1.12平方英里（2.9平方公里）的中世纪边界，2011年常住人口为7375人，是英格兰最小的城市。至少从19世纪开始，“伦敦”一词也指代围绕这一核心发展起来的大都市区域。
      </p>
    </div>

    <div id="content3">
      <p>
        孟买是印度马哈拉施特拉邦的首府，是印度人口最多的城市，也是印度人口最多的都会区，同时是世界第八大城市，截至2011年，城市人口约1840万，都会区人口约2070万。包括新孟买、塔恩、比万迪、卡利安等城市在内的都市区，是世界上人口最稠密的城市区域之一。
      </p>
      <p>
        孟买位于印度西海岸，拥有天然深水港。2009年，孟买被评为世界一线城市，也是印度最富裕的城市，其GDP在南亚、西亚和中亚城市中位居榜首。
      </p>
    </div>

    <div id="content4">
      <p>
        东京，正式名称为东京都，是日本47个都道府县之一。它是日本的首都，也是东京大都市区的核心，是世界上人口最多的都会区。这里是日本政府和皇居所在地，也是日本皇室的居所。
      </p>
      <p>
        东京位于本州岛东南部的关东地区，包括伊豆群岛和小笠原群岛。东京都成立于1943年，由原东京府和东京市合并而成。
      </p>
    </div>
  </div>
</div>

解决方案 #

多余的底部边框来自你给激活状态标签添加的::before伪元素，直接删除这段代码即可移除边框：

input:checked+label::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background: #ccc;
  bottom: -1px;
  right: 0;
  left: 0;
  margin: auto;
}

同时，为了让激活标签与下方内容区域衔接更自然，可以调整.content的样式：

.content {
  background: #fff;
  border: 1px solid rgb(217, 217, 217);
  border-top: none; /* 移除内容区顶部边框 */
  margin-top: -1px; /* 向上偏移1px，与标签无缝衔接 */
}

完成以上修改后，激活状态的Tab标签底部就不会有多余边框，且能和内容区域完美贴合，达到期望效果。

内容的提问来源于stack exchange，提问作者Jason Kelly