如何在CSS中创建标记高亮效果？

如何在CSS中创建标记高亮效果？

在文案中高亮显示文本是吸引读者注意较长文本中特定短语的绝佳方法。还有一种更有效的办法：让高亮显示看起来像是真的被标记过一样。Hotjar 的首页就是一个很好的例子。

我运营着一个名为SVGBox的副业项目，旨在提供最简单的图标使用方法。最近，我添加了笔刷图标集，您可以使用该图标集，通过将笔刷用作背景图像并自定义填充颜色来创建相同的效果。让我们来看看具体操作方法：

创建标记效果

我将使用画笔 1 来创建最简单的效果。



<style>
    .highlight {
        background: url(//s2.svgbox.net/pen-brushes.svg?ic=brush-1&color=ffff43);
    }
</style>

<div>
    This is a <span class="highlight">
        highlighted part
    </span> of the text
</div>

看起来还不错，但是高亮背景的位置和大小可以调整得更好。它应该向两侧拉伸，并在 Y 轴方向上也稍微拉伸一些。



<style>
    .highlight {
        background: url(//s2.svgbox.net/pen-brushes.svg?ic=brush-1&color=ffff43);
        margin: -2px -6px;
        padding:  2px  6px;
    }
</style>

<div>
    This is a <span class="highlight">
        highlighted part
    </span> of the text
</div>