Question

I am trying to build links that look like these:

This from another post on here is the closest I have found – http://jsbin.com/ahoyug/1/edit

but due to using border-left the gaps between the line height is filled. As shown here:

Is this possible to do using CSS or will a JS solution be needed?

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 totally great.