CSS:侧面填充多行链接背景？

Question

我正在尝试构建如下所示的链接:

来自这里的另一篇文章是我找到的最接近的帖子 - http://jsbin.com/ahoyug/1/edit

但是由于使用了border-left,行高度之间的间隙被填充.如下图所示:

这可能是使用CSS还是需要JS解决方案？

Answer 1

这是你想要的吗？

演示

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

编辑:我box-shadow从@Jaik的答案中添加了该属性,因为它非常棒.