テキストに、単に背景色を加えるだけなら background でしていできますし、下線を引くなら border-bottom や CSS3 の text-decoration-line で実装できます。

今回はもっとグラフィカルに、蛍光ペンのような太めの線をテキストに被せて表示させる方法を紹介します。

使用するのは CSS3 の linear-gradient 要素。

以下が具体的な表記方法です。

b {
background: -webkit-linear-gradient(transparent 40%, #ff9 40%);   
background: -moz-linear-gradient (transparent 40%, #ff9 40%);
background: -ms-linear-gradient (transparent 40%, #ff9 40%);
background: -o-linear-gradient (transparent 40%, #ff9 40%);
background: linear-gradient (transparent 40%, #ff9 40%);
}

上記例ではhtmlタグの <b>〜</b> で囲った箇所に処理が施されます。