css - 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 的回答中添加了该属性，因为它非常棒。

Answer 2

它当然可以box-shadow很容易地用 CSS3 完成。我在这里放了一个 JS Bin 示例：http: //jsbin.com/ahoyug/12/edit

您需要整理供应商前缀和旧的 IE 后备以进行生产。