html - CSS在换行前创建填充

是否可以在换行之前添加填充？如图所示，从此到此。

当前的CSS代码:

span.highlight { background: #0058be; color: #FFF; padding: 2px 5px; }

最佳答案

我必须添加一个额外的margin-left:0;来使两行从同一点开始。

这可以通过纯CSS完成。在高亮的左侧和右侧以相同的颜色创建一个纯色box-shadow(并使用margin纠正间距)。对于您的情况:

span.highlight {
  background: #0058be;
  color: #FFF;
  box-shadow:5px 0 0 #0058be, -5px 0 0 #0058be;
  padding: 2px 0;
  margin:0 5px;
}