如何為 html 或 css 中的文本創建自定義下划線或突出顯示？

Question

我想弄清楚如何為文本創建自定義背景效果。 換句話說，我怎樣才能做這樣的事情：

Answer 1

使用<mark>元素 ，然后將line-height設置為tweek

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

 <h1><mark>Lorem ipsum</mark></h1> 

Answer 2

您可以使用設置為背景屬性的線性漸變輕松實現此目的。

CSS

.low-highlight {
  background:linear-gradient(180deg, transparent 60%, yellow 60%);
}

HTML

<p>You can easily <span class="low-highlight">do underline</span> me.</p>

 p { font-size:68px; font-weight:600; font-family:'Merriweather'; }.low-highlight { background:linear-gradient(180deg, transparent 60%, yellow 60%); }

 <p>You can easily <span class="low-highlight">do underline</span> me.</p>

Answer 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%; } 

 <h1>My Text</h1> 

這還允許輕松添加動畫。 但是，這僅適用於單行項目。 您可以在svg fill屬性內更改顏色。 如果經過編碼，則可在IE9 +上使用，因此非常兼容！ 只需記住，十六進制顏色前面的哈希符號也需要進行編碼-它的%23 （我個人使用sass為我編碼）。

Answer 4

一篇非常好的文章介紹了一種使用漸變實現此效果的好方法： https : //thirtyeightvisuals.com/blog/low-highlight-heading-links-squarespace

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

Answer 5

嘗試調整行大小。 LINE-HEIGHT。 然后突出顯示文本。