CSS: Highlighted Text Effect

Question

I am trying to create selected text with a slight indentation, but the addition only applies to the beginning and end, and not to new lines.

#highlight { background: rgba(255,230,0,0.5); padding: 3px 5px; margin: -3px -5px; line-height: 1.7; border-radius: 3px; } <span id=highlight>text<br>here</span> 

Please see here: http://jsfiddle.net/CNJZK/7/

Are there any clean CSS fixes so that the inner (“sharp”) edges expand a little further? that is, in this image: http://i.imgur.com/j8mIJZS.jpg

Answer 1

Try adjusting the display on your span to the built-in block:

 #highlight { background: rgba(255, 230, 0, 0.5); padding: 3px 5px; margin: -3px -5px; line-height: 1.7; border-radius: 3px; display:inline-block; } 

JsFiddle example

Answer 2

If you are not limited to a specific HTML standard, you can take a look at the <mark> tag that was introduced with HTML5. This site gives you a quick overview.

Hope this helps!

Answer 3

You need to set the display to inline-block or block .

 #highlight { display: inline-block; /* ... */ } 

Answer 4

In case someone is still looking for an answer:

 p { box-shadow: 0px 0px 0px 5px yellow; display: inline; line-height: 2; margin: -5px -5px; background-color: yellow; border-radius: 1px; } 

See here jsfiddle.