css - 使achor标记块，但只突出显示文本，ot整个元素

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