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

Question

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

我需要在文本中添加一些小填充，以使其更加悦目并且可读。

文本被包装时出现问题 - 填充仅影响第一行，使其看起来好像标题是缩进的。使元素（锚点）块级别修复了这个问题，但是整个元素都是高亮度而不仅仅是文本。

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

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

Answer 1

是的，这可以仅使用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

Answer 2

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是您想要背景的颜色。