[英]How can I make text that impedes on it's underline 'block out' the underline with whitespace in HTML/CSS?
[英]How can I create custom underline or highlight for text in html or css?
使用<mark>元素 ,然后将line-height设置为tweek
mark { display: inline-block; line-height: 0em; padding-bottom: 0.5em; }
<h1><mark>Lorem ipsum</mark></h1>
您可以使用设置为背景属性的线性渐变轻松实现此目的。
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>
对于这些,我通常使用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为我编码)。
一篇非常好的文章介绍了一种使用渐变实现此效果的好方法: https : //thirtyeightvisuals.com/blog/low-highlight-heading-links-squarespace
.highlight {
background: linear-gradient(180deg,rgba(255,255,255,0) 50%, #FFD0AE 50%);
}
尝试调整行大小。 LINE-HEIGHT。 然后突出显示文本。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.