CSS 如何实现文字高亮标记效果？

Question

CSS 如何实现文字高亮标记效果？

仓乃文 · Accepted Answer

文字高亮标记效果通过 background 渐变模拟荧光笔标记，利用 background-size 动画实现高亮从无到有的填充效果。

```css
.highlight-text {
  background: linear-gradient(transparent 60%, #ffeb3b 60%);
  transition: background-size 0.3s ease;
}
```

动画高亮标记：
```css
.highlight-animated {
  background: linear-gradient(transparent 60%, #ffeb3b 60%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 0.5s ease;
}

.highlight-animated:hover {
  background-size: 100% 100%;
}
```

多种颜色高亮：
```css
.highlight-pink {
  background: linear-gradient(transparent 60%, #ff9ff3 60%);
}

.highlight-blue {
  background: linear-gradient(transparent 60%, #48dbfb 60%);
}

.highlight-green {
  background: linear-gradient(transparent 60%, #1dd1a1 60%);
}
```

补充说明：
- transparent 60% 让文字上半部分透明，下半部分显示高亮色
- 调整百分比可控制高亮覆盖范围
- 适合文章中重点词句标记、代码 diff 高亮等场景
- 可配合 ::selection 自定义选中文字的高亮颜色