テキストに下線を引く方法

PCサイズ画面での閲覧推奨です。
画面幅小さいと、若干見づらいところがあると思います。ご了承ください。

A. text-decorationでシンプルに下線を引く

むかし、ある霧のふかい朝でした。

むかし、ある霧のふかい朝でした。

欧文書体では、下線と交差する部分が綺麗

sample: Typography

3点リーダーは含まない

王子はみんながちょっといなくなったひまに、玻璃でたたんだ自分のお室から、ひょいっと芝生へ飛びおりました。

B. 3点リーダーがある時はborder-bottomで下線を引く

むかし、ある霧のふかい朝でした。

王子はみんながちょっといなくなったひまに、玻璃でたたんだ自分のお室から、ひょいっと芝生へ飛びおりました。

そして蜂雀のついた青い大きな帽子を急いでかぶって、どんどん向こうへかけ出しました。「王子さま。王子さま。どちらにいらっしゃいますか。はて、王子さま」と、年よりのけらいが、室の中であっちを向いたりこっちを向いたりして叫けんでいるようすでした。王子は霧の中で、はあはあ笑って立ちどまり、ちょっとそっちを向きましたが、またすぐ向き直って音をたてないように剣のさやをにぎりながら、どんどんどんどん大臣の家の方へかけました。

3点リーダーの作り方の違いによる下線の表示結果

●-webkit-line-clamp: 1;の場合

いつか霧がすうっとうすくなって、お日さまの光が黄金色に透きとおってきました。やがて風が霧をふっと払いましたので、露はきらきら光り、きつねのしっぽのような茶色の草穂は一面波を立てました。

One thing was certain, that the white kitten had had nothing to do with it:—it was the black kitten's fault entirely.

●text-overflow: ellipsis;の場合

いつか霧がすうっとうすくなって、お日さまの光が黄金色に透きとおってきました。やがて風が霧をふっと払いましたので、露はきらきら光り、きつねのしっぽのような茶色の草穂は一面波を立てました。

One thing was certain, that the white kitten had had nothing to do with it:—it was the black kitten's fault entirely.

C. background-imageで下線を引く

background-image: linear-gradient();による下線の作り方2パターン

1: 3点リーダーまで含むマーカー風な下線

りんどうの花は刻まれた天河石と、打ち劈かれた天河石で組み上がり、その葉はなめらかな硅孔雀石でできていました。黄色な草穂はかがやく猫睛石、いちめんのうめばちそうの花びらはかすかな虹を含む乳色の蛋白石、とうやくの葉は碧玉、そのつぼみは紫水晶の美しいさきを持っていました。

2: グラデーションの下線

りんどうの花は刻まれた天河石と、打ち劈かれた天河石で組み上がり、その葉はなめらかな硅孔雀石でできていました。黄色な草穂はかがやく猫睛石、いちめんのうめばちそうの花びらはかすかな虹を含む乳色の蛋白石、とうやくの葉は碧玉、そのつぼみは紫水晶の美しいさきを持っていました。

D. background-sizeで線の横幅を変えるアニメーション

▼ ホバーしてご確認ください

すると小さなきれいな声で、誰か歌いだしたものがあります。

box-decoration-breakの値によるアニメーションの違い

sliceの場合

▼ ホバーしてご確認ください

「ポッシャリ、ポッシャリ、ツイツイ、トン。
はやしのなかにふる霧は、
蟻のお手玉、三角帽子の、一寸法師のちいさなけまり」

cloneの場合

▼ ホバーしてご確認ください

「ポッシャリ、ポッシャリ、ツイツイ、トン。
はやしのなかにふる霧は、
蟻のお手玉、三角帽子の、一寸法師のちいさなけまり」

E. CSS疑似要素で作る下線で、自由度の高いアニメーションを

単語・1行以内はOK

その宝石の雨は、草に落ちてカチンカチンと鳴りました。

複数行はNG

その時、風が来て、りんどうの花はツァリンとからだを曲げて、その天河石の花の盃を下の方に向けましたので、トパァスはツァラツァランとこぼれて下のすずらんの葉に落ち、それからきらきらころがって草の底の方へもぐって行きました。

transformプロパティによるアニメーション

▼ ホバーしてご確認ください

硅孔雀石

猫睛石

蛋白石

F. 下線用のタグを作る方法で、複数行でも自由度の高いアニメーションを

clip-pathによるアニメーション

▼ ホバーしてご確認ください

「ポッシャリ、ポッシャリ、ツイツイ、トン。
はやしのなかにふる霧は、
蟻のお手玉、三角帽子の、一寸法師のちいさなけまり」

▼ ホバーしてご確認ください

「ポッシャリ、ポッシャリ、ツイツイ、トン。
はやしのなかにふる霧は、
蟻のお手玉、三角帽子の、一寸法師のちいさなけまり」

transform: translateY()によるアニメーション

▼ ホバーしてご確認ください

「ポッシャリ、ポッシャリ、ツイツイ、トン。
はやしのなかにふる霧は、
蟻のお手玉、三角帽子の、一寸法師のちいさなけまり」

おまけ

画像ならbackground-image: url();

むかし、ある霧のふかい朝でした。

そして蜂雀のついた青い大きな帽子を急いでかぶって、どんどん向こうへかけ出しました。「王子さま。王子さま。どちらにいらっしゃいますか。はて、王子さま」と、年よりのけらいが、室の中であっちを向いたりこっちを向いたりして叫けんでいるようすでした。王子は霧の中で、はあはあ笑って立ちどまり、ちょっとそっちを向きましたが、またすぐ向き直って音をたてないように剣のさやをにぎりながら、どんどんどんどん大臣の家の方へかけました。

▼ ホバーしてご確認ください

「ポッシャリ、ポッシャリ、ツイツイ、トン。
はやしのなかにふる霧は、
蟻のお手玉、三角帽子の、一寸法師のちいさなけまり」