使用< span>漂亮的HTML高亮显示 [英] pretty html highlighting using <span>

问题描述

我要在要突出显示的内容周围使用< span> 标签在HTML文档中突出显示文本。 span类具有定义的 background-color ，并且还设置了 border-radius 。这个效果很好。

I'm highlighting text in a HTML document using <span> tags around the content to be highlighted. The span class has a background-color defined, and a border-radius is also set. This works well.

我希望突出显示的扩展范围超出< span> 内容。也就是说，在span开始的左侧有几个像素，在span结束的右侧有几个像素。

I'd like the highlight to extend a bit further beyond the normal extents of the <span> content. That is, a few pixels to the left of the span-start, and a few pixels to the right of the span-end. Ideally I'd do this without spacing apart the content itself.

我可以使用任何好的CSS技巧来实现这一点？

Any good css tricks I can use to achieve this?

推荐答案

您可以设置填充和负边距。例如：

You can set a padding and a negative margin. For example:

span {
    margin: -5px;
    padding: 5px;
}

您可以看到演示这里。

You can see a demo here.

这篇关于使用< span>漂亮的HTML高亮显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！