[分享]css制作选项卡下划线

CSS制作选项卡下划线是我们在网页设计中常用的技巧之一。下面介绍如何通过CSS制作选项卡下划线。

.tab{
  position: relative;
  padding: 0 20px;
  display: flex;
  justify-content: space-around;
}

.tab-item{
  position: relative;
  cursor: pointer;
  padding: 10px;
  font-size: 16px;
  color: #333;
}

.tab-item.active:after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #007bff;
} 

我们首先创建了选项卡所在的.tab容器。使用flex布局，justify-content: space-around使所有选项卡等间距排列。选项卡使用.tab-item类来表示，我们通过设置其position为relative和cursor为pointer让鼠标悬停时变为手型。

当选项卡被选中时，使用.active类来表示其选中状态。.active:after伪类用于选项卡下方划线的实现。内容(content)为空字符串，position:absolute定位于选项卡的底部，左右跨度都为100%（即选项卡宽度），高度为2px。

最后，我们给选项卡下划线设置背景色即可完成CSS制作选项卡下划线。