通过伪元素 ::before 在文字下方创建半高、圆角背景层，可精准实现单词下半部分的高亮效果，避免渐变背景无法控制圆角的局限。
通过伪元素 `::before` 在文字下方创建半高、圆角背景层，可精准实现单词下半部分的高亮效果，避免渐变背景无法控制圆角的局限。
在 Web 排版中，有时需要对文本进行非标准高亮——例如仅高亮单词的下半部分（约 50% 高度），同时保持柔和的圆角边框。使用 linear-gradient 虽能模拟分段色块，但因渐变本身不支持 border-radius，导致圆角失效，难以复现设计稿中的精致视觉效果。
推荐方案：伪元素 + 绝对定位 + 圆角背景
核心思路是将文字包裹在 inline-block 元素中，再利用 ::before 伪元素作为底层高亮层，精确控制其高度、位置与圆角：
span.highlight-half {
display: inline-block;
position: relative;
font-size: 3rem;
line-height: 1.2; /* 建议显式设置，确保垂直居中更稳定 */
padding: 0.25em 0.5em; /* 水平留白提升可读性 */
}
span.highlight-half::before {
content: "";
position: absolute;
left: 0;
top: 50%; /* 从文字垂直中线开始向下延伸 */
width: 100%;
height: 50%; /* 占据文字容器下半部分 */
background-color: #ff9800; /* 替换为所需高亮色 */
border-radius: 0.3em; /* 关键：此处可自由设置圆角 */
z-index: -1;
}
HTML 使用方式简洁明了：
<span class="highlight-half">Highlighted</span>
✅ 优势说明：
- border-radius 直接作用于伪元素，圆角渲染自然；
- top: 50% + height: 50% 确保高亮区域严格覆盖下半部分，不受字体度量差异干扰；
- z-index: -1 保证文字始终位于高亮层上方，无遮挡；
- 支持响应式：配合 em/rem 单位，可随父级字号自动缩放。
⚠️ 注意事项：
- 若文字含多行（如 white-space: normal），需额外处理伪元素高度逻辑，建议限定单行场景；
- line-height 建议显式设定（如 1.2–1.4），避免不同字体默认行高差异导致高亮偏移；
- 如需适配深色背景，可添加 box-shadow: 0 0 0 1px rgba(0,0,0,0.1) 微调边缘清晰度。
该方法兼容所有现代浏览器（Chrome/Firefox/Safari/Edge ≥ 2020），无需 JS，语义清晰、性能高效，是实现「半高圆角文字高亮」的专业级 CSS 解决方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
