<div class="blueText">这是文字</div>
.blueText {
position: relative;
display: inline-block;
color: #57aaff;
}
.blueText::after {
content: '';
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: #57aaff;
}
这样就可以根据文字的不同长度创建与文字相同长度的下划线,并且可以自己控制文字与下划线之间的距离
效果图: