多种纯CSS实现方案详解
本文介绍如何使用原生HTML和CSS为文字添加底部填充颜色效果，包括下划线式、背景延伸式等多种视觉风格，适用于网页标题、导航菜单、重点标注等场景。
使用 ::after 伪元素创建底部色块，可控制高度和位置。
<!-- HTML -->
<span class="highlight-line">这是底部填充黄色的文字效果</span>
/* CSS */
.highlight-line {
display: inline-block;
position: relative;
}
.highlight-line::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 40%; /* 填充高度 */
background-color: #ffcc00;
z-index: -1;
}利用 border-bottom 实现简单的底部填充效果。
.highlight-underline {
display: inline-block;
padding-bottom: 6px;
border-bottom: 6px solid #e74c3c;
}整体背景填充，适合短文本或关键词高亮。
.highlight-bg {
display: inline-block;
background: #4ecdc4;
color: white;
padding: 2px 8px;
border-radius: 4px;
}