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

编辑：我在@Jaik的答案中添加了box-shadow属性，因为它非常棒。

Answer 2

当然可以使用CSS3 box-shadow轻松完成。我在这里提出了一个JS Bin示例：http://jsbin.com/ahoyug/12/edit

您需要整理供应商前缀和旧IE回退以进行生产。