html - CSS 在换行前创建填充

Question

是否可以在换行前添加填充？如，由此制作 对此 .

当前的 CSS 代码:

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

Answer 1

我必须添加一个额外的 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;
}