实现原理
通过CSS的伪元素(::before 或 ::after)在文字下方创建一个带有背景颜色的层，通过定位(position)控制其位置，从而实现文字下方有一层颜色的效果。
核心CSS代码
.word-effect {
position: relative;
}
.word-effect::before {
content: '';
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
height: 12px;
background: linear-gradient(45deg, #ff6b6b, #feca57);
z-index: -1;
border-radius: 6px;
opacity: 0.8;
}
应用场景
这种效果常用于网页标题、重要文字强调、广告语等需要突出显示的场景，能够有效吸引用户注意力，提升视觉层次感。