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;
}

Answer 2

It took some tryouts, but here it is: the single- and multi-line highlighter with additional padding.

HTML:

<h3>Welcome to guubo.com, Gajus Kuizinas</h3>
<p><span>So far you have joined: </span><em>Networks guubo.com</em><ins></ins></p>

CSS:

h3 {
  padding-left: 5px;
}
p {
    background: #0058be;
    position: relative;
    padding: 0 5px;
    line-height: 23px;
    text-align: justify;
    z-index: 0;
}
p span {
    background: #fff;
    padding: 2px 0 2px 5px;
    position: relative;
    left: -5px;
}
p em {
    background-color: #0058be;
    color: #fff;
    padding: 2px 5px;
}
ins {
    position: absolute;
    width: 100%;
    line-height: 23px;
    height: 23px;
    right: -5px;
    bottom: 0;
    background: #fff;
    z-index: -1;
}

The trick is to style the whole paragraph with a blue background, and only put white background on top of that at the beginning and the end. Doing so assures blue background elsewhere...;)

Two main disadvantages:

• The highlighted text has to start at the first line (but does not necessarily have to flow into a second),
• The paragraph has to be aligned with justification.

Tested in Opera 11, Chrome 11, IE7, IE8, IE9, FF4 and Safari 5 with all DTD's.

See edit history for the previous less successful attempts.

Answer 3

You can achieve this using just box shadow, with no messy padding or margins.

The trick is to use box-shadow's spread option, and the padding on wrapped inline elements behaves as you expect.

.highlight {
    background: black;
    color: white;
    box-shadow: 0 0 0 5px black;
}

Answer 4

display: block will achieve part of what you want, but of course it will make the span a block element, and so you won't get the wrapping behaviour seen in your example.

Your screenshot holds the clue to what you need to try and do: you need to impose a margin to the left and right on your "normal" paragraph text, and then have the span disregard this (and include its padding), to achieve an "overhang" of your blue highlight when compared to the rest of your text. You can't do that with straight CSS on your span, because it covers two lines and obviously "left" and "right" only refer to the span, and not the individual pieces of text contained therein.

Straight CSS isn't the answer here. You might want to take a look at this question, which uses a jQuery filter to grab the first word in an entity, etc.:

jQuery first word selector

Answer 5

Maybe you can use this technique. http://samcroft.co.uk/2011/jquery-plugin-for-inline-text-backgrounds/

Answer 6

The closest thing, if it really matters that much I'd say is to add display: inline-block;