【CSS】蛍光ペン風にテキストの下にラインを引く

CSS3を使うと簡単に実現できることに驚きました。

試して見るとわかると思いますが、いろいろ色を用意しても結局使うのは１色だけにしたほうが良い気がします。あと、文字を太字にするか、そのままにするかで視覚的なイメージが変わるような気がします。単語レベルでなくて文章をマークするのなら、太字はもしかすると厳しいかもと思います。

strong{
    font-weight:bold;
}
.marker_yellow{
    background:linear-gradient(to bottom, transparent 60%,#fcfc60 60%);
}
.marker_lime{
    background:linear-gradient(to bottom, transparent 60%,#66FFCC 60%);
}
.marker_water{
    background:linear-gradient(to bottom, transparent 60%,#66ccff 60%);
}
.marker_pink{
    background:linear-gradient(to bottom, transparent 60%, #ffbbdd 60%);
}

実際に作成したCSSが上記です。strongは多くの場合、太文字設定がされてる可能性がたかいと思います。打ち消したい場合は「 font-weight:normal;」指定すればよいかと思います。

原理

//background:linear-gradient(to bottom,transparent 縦余白%, #色 縦余白%);
  background:linear-gradient(to bottom, transparent 60%,#fcfc60 60%);

線の色を決めているのは、「#fcfc60」の部分です。
線の太さを決めているのは、60%で、数字が小さいほど太くなります。

to bottom　＝下方向に
transparent ＝透明

古いブラウザ対策

.marker_yellow{
    background:#fcfc60;
    background:linear-gradient(to bottom, transparent 60%,#fcfc60 60%);
}

黄色の場合ならこんな感じにします。

CSS3をサポート　：下線
CSS3を未サポート：文字全体をマーク

動作は上記のようになります。

参考

・はてなブログの強調表示を蛍光ペン風にマーキングする - むじん島
・蛍光ペン効果を付けるには？ [ホームページ作成] All About