複数行またがるテキストアンダーライン

文中の一部、強調の為にアンダーラインを引きたい。

text-decoration では 1px のアンダーラインしか引けない。

アンダーライン1pxでもいいですか？ → 3px じゃないとダメ

アンダーラインじゃなくて背景色でマーカーで塗った感じでもいいですか？ → 却下

困った。

仕方無いから画像作るか・・・ → イケてない

で、思いつきました。

html

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<em>ここ強調したい</em>テキストテキストテキストテキストテキスト<em>ここ強調したい</em>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<em>ここ強調したい</em>テキストテキストテキストテキスト</p>

scss

em {
    position: relative;
    display: inline-block;

    &:after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: -1;
        width: 100%;
        border-bottom: 3px solid #ffef00;
    }
}

これでもいい感じなんだけど、親要素の幅と文書量の兼ね合いで、右側に無駄な余白が発生しまくる場合がある。 → イケてない

で、結果こんな感じで解決しました。

scss

em {
    @include box-shadow(inset -3px -6px 0 -3px #ffff00);
}

CSS3 万歳！！