-
效果如下
1675146899532.png 废话不多说直接看代码
// =============html部分===============
<div class="meal-nav">
<div class="layout-flex layout-flex-center">
<span class="meal-nav-item meal-nav-item-active">
企业套餐
</span>
<span class="meal-nav-item">
个人套餐
</span>
</div>
</div>
// =============css部分===============
.meal-nav {
text-align: center;
margin-bottom: 47px;
}
.meal-nav-item {
width: 120px;
height: 24px;
font-size: 20px;
font-family: Inter-Regular, Inter;
font-weight: 400;
color: #434E70;
text-align: center;
line-height: 24px;
display: inline-block;
cursor: pointer;
}
.meal-nav-item-active {
font-size: 28px;
font-weight: bold;
color: #0088FF;
position: relative;
}
.meal-nav-item-active:after {
position: absolute;
content: '';
width: 20px;
height: 4px;
top: 40px;
left: 50px;
background: #0088FF;
display: inline-block;
border-radius: 20px;
}
.meal-nav-item:last-child {
margin-left: 60px;
}
.layout-flex {
display: flex;
}
.layout-flex-center {
justify-content: center;
}
