テキストに、単に背景色を加えるだけなら 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%);
}

上記の例ではlinear-gradientの方向の指示は省略され、デフォルトの状態で上から下に向けて変化します。
上から60%までtransparent（透明）で、60%以降は蛍光ペンの色（#ff9）になるという仕組みです。

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