如何创建带圆角下划线的标签导航（仿谷歌标签样式）

你的代码主要问题在于伪元素用法错误、元素定位逻辑不对，我给你修正后的完整实现：

修正后的代码 #

HTML #

<ul class="google-tabs">
  <li><a href="index.html" class="active">Dashboard</a></li>
  <li><a href="mytasks.htm">My tasks</a></li>
  <li><a href="settings.htm">Settings</a></li>
</ul>

CSS #

/* 重置ul默认样式并设置底部边框 */
.google-tabs {
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: flex-end; /* 让所有标签底部对齐边框 */
}

.google-tabs li {
  margin: 0 20px;
  cursor: pointer;
}

.google-tabs li a {
  display: inline-block;
  text-decoration: none;
  color: #5f6368;
  padding: 10px 0;
  position: relative; /* 为伪元素提供定位基准 */
}

/* 激活状态的圆角下划线 */
.google-tabs li a.active:after {
  content: "";
  position: absolute;
  bottom: -1px; /* 刚好覆盖ul的底部边框 */
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #1a73e8;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

/* 可选：非激活标签hover效果 */
.google-tabs li a:not(.active):hover {
  color: #1a73e8;
}

关键调整说明 #

• 用:after伪元素生成下划线，这是实现动态装饰元素的正确方式
• 通过position: relative给a标签定位，让伪元素能精准贴在标签底部
• 用flex布局让标签底部对齐，避免文字高度不同导致的错位
• 下划线bottom: -1px刚好覆盖ul的底部边框，还原谷歌标签的视觉效果

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