[CSS] text-decoration:overlineで上線を付ける

text-decoration:overlineで上線を付けることができます。こんな風になります。

p{text-decoration:overline;}

ついさっきまでこのスタイルのことを知らなかったのですが、様々なスタイルを紹介しているサイトを見ていたところ、なかに文字の上に線がついたものが。文字の上に線って珍しいな、どうやってるんだろうと思って調べてみたら、それがoverlineでした。

しかし上線といっても使いどころがまったく思い浮かびません。text-decoration:underlineは基本中の基本スタイルなんですけどね…。実生活のなかでも上にだけ線を引く場面がまったくありませんから、使い道が思い浮かばないのも当然でしょうか。

text-decorationプロパティは値を複数設定できますので、上下線や上下中線のようなこともできます。

上下線

p{text-decoration:underline overline;}

上下中線

p{text-decoration:underline overline line-through;}

上下線は使い方次第では面白いかもしれませんね。