css - 制作锚标记块，但只突出显示文本，而不是整个元素答案

【问题标题】：css - make achor tag block but only highlight text, ot the whole elementcss - 制作锚标记块，但只突出显示文本，而不是整个元素
【发布时间】：2013-12-18 23:05:16
【问题描述】：

我试图模仿一种图形打印趋势，您可以在其中突出显示标题。很简单。

我需要在文本中添加一点填充以使其更美观和可读。

文本被换行时会出现问题 - 填充仅影响第一行，使其看起来好像标题缩进了一样。将元素（锚点）设置为块级可以解决此问题，但随后整个元素都是高亮的，而不仅仅是文本。

这可以仅使用 css 完成吗？为这么简单的事情添加 javascript 将是令人讨厌的。

Tjek the website here. Most of the headers a fairly short why the problem doesn't occur.

【问题讨论】：

标签： inline highlighting css

【解决方案1】：

CSS：

h1 {
    background:#ff0;
    color:#000;
    box-shadow:0.2em 0 0 #ff0, -0.2em 0 0 #ff0;
    -moz-box-shadow:0.2em 0 0 #ff0, -0.2em 0 0 #ff0;
    -webkit-box-shadow:0.2em 0 0 #ff0, -0.2em 0 0 #ff0;
}

#ff0 是您想要的背景颜色。

【讨论】：

感谢您的回复。

【解决方案2】：

是的，这可以仅使用 CSS 来完成。 Here's 一篇关于 CSS-Tricks 的帖子，详细介绍了处理此问题的几种方法。

其中之一涉及使用box-shadow 来应用填充效果。只需设置两个阴影，每个阴影都具有所需填充的水平偏移以及高光的颜色：

.highlight {
  -webkit-box-shadow: 10px 0 0 orange,
                     -10px 0 0 orange;
  -moz-box-shadow: 10px 0 0 orange,
                  -10px 0 0 orange;
  box-shadow: 10px 0 0 orange,
             -10px 0 0 orange;
}

Demo

【讨论】：