通过伪元素 ::before 在文字下方叠加一个半高、圆角矩形背景，可精准实现单词下半部分的高亮效果，兼顾视觉柔和性与代码简洁性。
通过伪元素 `::before` 在文字下方叠加一个半高、圆角矩形背景，可精准实现单词下半部分的高亮效果，兼顾视觉柔和性与代码简洁性。
要实现如图所示的「单词下半部分高亮 + 圆角边框」效果（即高亮区域仅覆盖文字垂直方向的下半部分，且边缘平滑），直接使用 background: linear-gradient() 难以精确控制圆角，因为渐变本身不支持 border-radius。更可靠、语义清晰且兼容性良好的方案是：利用定位伪元素模拟半高高亮层。
✅ 推荐实现方式（伪元素 + 定位）
span.highlight {
display: inline-block;
position: relative;
font-size: 3rem;
line-height: 1; /* 避免行高干扰高度计算 */
padding: 0.25em 0.5em; /* 水平留白更自然，垂直由伪元素控制 */
}
span.highlight::before {
content: "";
position: absolute;
top: 50%; /* 从文字中线开始向下延伸 */
left: 0;
width: 100%;
height: 50%; /* 精确覆盖下半部分 */
background-color: #ff9800; /* 替换为你需要的高亮色 */
border-radius: 0.3em; /* 关键：圆角生效于伪元素本身 */
z-index: -1;
}
<span class="highlight">Highlighted</span>
? 原理说明：span 设为 inline-block 后可精确定位；伪元素 ::before 绝对定位在文字中线下方，高度设为 50%（相对于 span 的内容盒高度），再配合 border-radius 即可获得柔滑圆角——这是纯 CSS 中最可控、最易维护的解法。
⚠️ 注意事项
- 确保 span 无额外 line-height 干扰（推荐设为 1 或显式值）；
- padding 建议只设左右值（如 0.5em），上下留白由伪元素高度和位置统一控制；
- 若需适配不同字号，可将 border-radius 改为 em 或 rem 单位（如 0.25em），保持比例协调；
- 不建议依赖 background: linear-gradient() 实现此效果——它无法响应 border-radius，且百分比计算易受字体渲染差异影响。
该方法在现代浏览器中完全兼容（Chrome 4+, Firefox 3.5+, Safari 5.1+, Edge 12+），无需 JS，轻量高效，适合标题、关键词强调等设计场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
