CSS: Sidebar for multi-line link background?

Question

I am trying to create links that look like this:

This from another post I found here is http://jsbin.com/ahoyug/1/edit

but due to the use of the border on the left, the spaces between the line height are filled. As shown here:

Is it possible to do this with CSS or will you need a JS solution?

Answer 1

Is this what you want?

Demo

Jsfiddle

HTML

<div> <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span> </div>​ 

CSS

 div { padding: 40px; background-color: #C9D77D; font-family: Helvetica, sans-serif; font-weight: bold; font-size: 20px; } span { padding: 6px 0; background-color: white; line-height: 2.2; box-shadow: -10px 0px 0 #FFF, 10px 0px 0 #FFF; } 

Edit: I added the box-shadow property from @Jaik's answer because it was great.

Answer 2

This can be done using CSS3 box-shadow quite easily. I gave an example of JS Bin here: http://jsbin.com/ahoyug/12/edit

You will need to sort the vendor prefixes and old IE backups for production.