截至 2022 年，如果你在百度上搜索如何使用 CSS 像荧光笔一样为文本添加下划线，你linear-gradient会发现大部分使用它们的文章。但是，现在可以linear-gradient不使用来表达相同的东西text-decoration，所以我将介绍它。

.highlight {text-decoration: underline;text-decoration-thickness: 0.5em;text-decoration-color: rgba(255, 228, 0, 0.4);text-underline-offset: -0.2em;text-decoration-skip-ink: none;}

重点是text-decoration-skip-ink: none。如果不指定此项，与文本重叠的行将被切断，类似荧光笔的效果将丢失。

曾经text-decoration-skip-ink是 Safari 不支持的瓶颈，现在 Safari 15.4 及更高版本都支持了，它可以与所有主流浏览器（caniuse）一起使用。

linear-gradient您可以比使用 更直观地指定线条的位置、粗细和颜色。此外，linear-gradient使用 时，很难将行定位在文本行区域的下方，但text-decoration使用 的方法，则没有这样的限制。

网站建设时可以通过text-decoration 实现“带有 CSS 的高亮下划线”    https://cdnanqi.cn/wangluoyingxiao/17015.html