css - 每行的背景颜色分开的文本

Question

我必须为文本(例如标题)添加背景颜色，并在其周围添加一些填充。

应用 display:inline-block 填充是完美的，但显然，背景将跨越整个 block 宽度(例如 100%)。

设计要求每行文本都有一个单独的背景条，这可以使用 display:inline 和 line-height:160%; 来实现，但是这样做的缺点是仅在第一行应用左填充而仅在最后一行应用右填充。

Here a jsFiddle with two examples . 第二个与期望的行为最相似，但显然填充不正确。

CSS代码的相关部分是:

.inline-block
{
    display:inline-block;
    padding:5px 20px;
}

.inline
{
    display:inline;
    padding:5px 20px;
    line-height:160%;
}

如何结合两种方法的优势？

Answer 1

为此，您可以使用 box-shadow CSS 调用。我已经完成了最终结果的 fiddle 。然后您可以使用它来获得您想要的确切结果

CSS:

.highlightme {
background-color: #A8332E;
padding: 0.5rem 0;
-webkit-box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E;
box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E;
box-decoration-break: clone;
}

JSFiddle