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

確かに、CSS3 でbox-shadow簡単に実行できます。ここに JS Bin の例を掲載しました: http://jsbin.com/ahoyug/12/edit

本番環境では、ベンダー プレフィックスと古い IE フォールバックを整理する必要があります。