【CSSテクニック】 文字の後ろに蛍光ペンで書いたようなラインを引く (高さ中央ver)

文字の下に蛍光ペンでアンダーラインを引いたようなCSSはたくさん紹介されていますが、今回は「文字の中央にラインを引く」テクニックです。

文字の後ろに蛍光ペンで書いたようなライン

コードは以下になります。

<h2><span>見出し</span></h2>

h2 span {
    background:url('h2_bg.jpg') repeat-x;
    background-size: auto 40%;
    background-position:center;
    padding:0 0.3em;
}

※CSSだけでは表現することができないので、背景となる画像を準備する必要があります↓

背景画像のサンプル(h2_bg.jpg)