如何为 html 或 css 中的文本创建自定义下划线或突出显示？答案

【问题标题】：How can I create custom underline or highlight for text in html or css?如何为 html 或 css 中的文本创建自定义下划线或突出显示？
【发布时间】：2017-09-26 17:57:42
【问题描述】：

我正在尝试弄清楚如何为文本创建自定义背景效果。换句话说，我怎样才能做出这样的事情：

【问题讨论】：

标签： html css text underline

【解决方案1】：

使用<mark> element 并调整行高

mark {
  display: inline-block;
  line-height: 0em;
  padding-bottom: 0.5em;
}

&lt;h1&gt;&lt;mark&gt;Lorem ipsum&lt;/mark&gt;&lt;/h1&gt;

【讨论】：

我最近才知道这个元素甚至存在。现在我知道为什么了:)
@somethinghere 我去！几天前，我不得不经历this list。这个列表不是很大，但很高兴知道......
我也是不久前通过 htmlreference.io 发现的。这听起来像是一个已弃用的元素，让我想起了marquee。另外，事实证明我已经足够大了，可以认为......
知道如何让它在多行标题上发挥作用吗？

【解决方案2】：

一篇非常好的文章解释了一种使用渐变的好方法：https://thirtyeightvisuals.com/blog/low-highlight-heading-links-squarespace

.highlight {
  background: linear-gradient(180deg,rgba(255,255,255,0) 50%, #FFD0AE 50%);
}

【讨论】：

【解决方案3】：

对于这些，我通常使用一个 SVG 像素（一个 1x1 可拉伸的 HTML 编码的 SVG，带有填充颜色），我们可以随心所欲地操纵它：

h1 {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='1px' height='1px' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Crect x='0' y='0' width='1' height='1' fill='red' /%3E%3C/svg%3E") no-repeat 100% 100%;
  background-size: 100% 50%;
}

&lt;h1&gt;My Text&lt;/h1&gt;

这还允许轻松添加动画。但是，这仅适用于单行项目。您可以更改 svg fill 属性内的颜色。如果编码它可以在 IE9+ 上运行，所以它非常兼容！请记住，十六进制颜色前面的井号也需要编码 - 它的 %23（我个人使用 sass 为我编码）。

【讨论】：

我喜欢你的回答！ +1

【解决方案4】：

尝试调整线条大小。线高。然后突出显示文本。

【讨论】：

什么line-size？ line-height 对此有何影响？两者都没有。