"CSS Tips Factory" : Presented by Nishishi via WordPress.

上線と下線を同時に引く [テキスト, ]

スタイルシートを使ったテキストの装飾の1つに、「下線を引く」というのがあります。リンク文字にデフォルトで引かれるのと同じ「下線」(Underline)です。で、実は「上線」というのもあるんですよね。Overlineです。枠線(border)を使うのではなく、「テキストの装飾」として「上線」を引くことができます。例えば、以下のよーな感じ。

こんな感じで、文字列の上に線を引いたりできます。ちなみに、下線はこんな感じ。まあこれは紹介するまでもないですね。

この「上線」という装飾をいったいどういう場面で使えば良いのかよく分からんのですが、まあそういう装飾が可能です。んで、ここで重要なのは、「上線」と「下線」は同時に引けるということです。
上線も下線も、text-decorationプロパティを使うのですが、その値に「underline」と指定すれば下線が引かれ、「overline」と指定すれば上線が引かれます。この値には複数記述できるので、「underline」と「overline」を同時に記述することで、下線と上線を同時に引けます。

ソースは以下のよーなもの。

span {
   text-decoration: overline underline;
}

これを使って表示させてみると、次のようになります。

このように、上線と下線の両方を同時に引けます。

まあ、こんな装飾を普段使うことはないでしょうけどね。
今まで見たことのある使用例としては、「hover疑似クラスのa要素」に対して使うというのがありました。つまり、「リンク文字の上にマウスポインタが載ったときの装飾」として。
その場合の装飾は、マウスポインタの載った箇所を目立たせることが必要になると思うので、確かにこの装飾もアリかも知れませんね。

ソースは以下のよーな感じ。

a:hover {
   text-decoration: overline underline;
}

まあ、こんなこともできますよ、ということで。(^_^;)
私は使ってませんけどね。(^_^;;;

このCSS TIPSへのコメントはお気軽に! [コメントはまだありません。]

著者紹介

主要なカテゴリ

このCSS TIPSへのコメント・トラックバック

コメントはまだありません。

コメント投稿欄 このCSS TIPSに対するコメント投稿を歓迎します。

(必須)

(必須) ※公開されません

※公開(リンク)されます

コメント:

※投稿内容によってはフィルタによって保留扱いとなる場合があります。その場合は承認後に掲載されます。
※本文中にURLっぽい文字列を記述すると、投稿内容はスパム扱いとなって無視されてしまう場合がありますので書かないようご注意下さい。

トラックバック

このCSS TIPSへのトラックバックURLは以下の通りです。

※言及リンクがないトラックバックは拒否されますのでご注意下さい。また、文字コードはUTF-8でお送りいただける方が望ましいです。