html - CSS create padding before line-break

Question

Is it possible to add padding before line-break? As in, making from this to this .

Current CSS code:

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

Answer 1

I had to add an extra margin-left:0; to make the two lines start at the same point.

This can be done with pure CSS. Create a solid box-shadow to the left and right of the highlight in the same color (and use margin to correct the spacing). For your case:

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