text-decoretion:underline;を研究する

大体aタグのテキストに付加されることが多いtext-decoretion:underline;
これ自体にはtraisitionが効かないため、ふわっとさせたい昨今のWEBデザイン・コーディングではちょっと使い勝手がよろしくないと使用を回避しがちですが、text-decoretion:underline;で済むならじゃないですか?
意外と調整が効くtext-decoretion:underline;をこの機会に研究してみます。

デフォルト

ただのtext-decoretion:underline;を付加してみました。下線の色は文字色と同じです。文字サイズが大きくなると下線も太くなってしまいます。

英文

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

日本語

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

大きいサイズ

ポラーノの広場~Porano Square~

下線の種類を指定する

text-decoretion:underline;とさらにtext-decoration-styleで下線の種類を指定できます。bordersolidなど指定するときと大体同じかな? 詳しくは下記サイトをご参照ください。

text-decoration-style: dotted;

英文

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

日本語

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

大きいサイズ

ポラーノの広場~Porano Square~

text-decoration-style: wavy;

英文

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

日本語

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

大きいサイズ

ポラーノの広場~Porano Square~

下線の太さを指定する

text-decoretion:underline;とさらにtext-decoration-thicknessで線の太さを指定できます。px以外にもem、パーセントでも指定ができます。詳しくは下記サイトをご参照ください。

text-decoration-thickness: 1px;

英文

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

日本語

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

大きいサイズ

ポラーノの広場~Porano Square~

text-decoration-thickness: 3px;

英文

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

日本語

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

大きいサイズ

ポラーノの広場~Porano Square~

text-decoration-thickness: 0.1em;

英文

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

日本語

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

大きいサイズ

ポラーノの広場~Porano Square~

下線の色を指定する

text-decoretion:underline;とさらにtext-decoration-colorで線の色を指定できます。rgb、hslなどでも指定ができます。詳しくは下記サイトをご参照ください。

text-decoration-color: #F2CF01;

英文

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

日本語

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

大きいサイズ

ポラーノの広場~Porano Square~

text-decoration-color: #A67C52;

英文

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

日本語

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

大きいサイズ

ポラーノの広場~Porano Square~

text-decoration-color: rgba(254,124,97,.5);

英文

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

日本語

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

大きいサイズ

ポラーノの広場~Porano Square~

テキストと下線の距離を指定する

text-decoretion:underline;とさらにtext-underline-offsetで文字から下線までの距離を指定できます。px、em、パーセントで指定ができます。詳しくは下記サイトをご参照ください。

text-underline-offset: 3px;

英文

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

日本語

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

大きいサイズ

ポラーノの広場~Porano Square~

text-underline-offset: 0.5em;

英文

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

日本語

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

大きいサイズ

ポラーノの広場~Porano Square~

マーカーのように使えるか?

ここからは複数の指定を組み合わせて、マーカーのように使えるか試行錯誤したいと思います。

text-decoration: underline; text-decoration-color: #ECCD33; text-decoration-thickness: 1.2em; text-underline-offset: -1.6em;

黄色で太めの線をテキストの後ろに来るよう調整してみました。

英文

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

日本語

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

大きいサイズ

ポラーノの広場~Porano Square~

おっと、text-decoretion:underline;は英語テキストの後ろでは消えてしまいますね。
また、Chromeでは意図した位置に線が引かれていますが、FirefoxやSafariでは線の位置が上にズレてしまっています。太くする際の基準点が違うんですね。

追記220818: この記事を書いた当時はChromeで見た場合、文字の真下に線がくるよう調整していたのですが、今は上にズレてしまっています。各ブラウザでtext-decoretion:underline;周りの仕様はちょいちょい変化するようですね(CSSで色々調整するもんじゃないぞってことなんでしょう……)

ではunderlineline-throughにしてみたらどうでしょう?(唐突にunderlineじゃなくなってすみません……)
text-decoration-lineについては下記サイトをご参照ください。

text-decoration: line-through; text-decoration-color: #ECCD33; text-decoration-thickness: 1.2em; text-underline-offset: -1.6em;

英文

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

日本語

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

大きいサイズ

ポラーノの広場~Porano Square~

検閲されたみたい! ……そもそもline-throughって取り消し線ですもんね。

text-decoration: underline; text-decoration-color: #ECCD33; text-decoration-thickness: 1.2em; text-underline-offset: -1.6em; text-decoration-skip-ink: none;

text-decoration: underline;とさらにtext-decoration-skip-ink: none;を指定して、英語の後ろでも飛ばないようにしてみます。

text-decoration-skip-ink: none;については下記サイトをご参照ください。

英文

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

日本語

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

大きいサイズ

ポラーノの広場~Porano Square~

いい感じになりました! PCのChromeで見るといい感じですが、iPhoneのChromeとSafariで見たら位置は上にズレてるわ、文字に被って検閲のようになってるわ、使えるもんじゃない状態です。

追記220818: こちらも同じく、この記事を書いた当時はChromeで崩れないようCSSで調整していたのですが、今は上にズレてしまっています。

hoverでtransitionを効かせられるか?

リンクにtext-decoration: underline;を付けて、hoverでtext-decoration: none;に切り替えてます。また、transition: 0.5s all;を付加しています。

デフォルト

英文

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

日本語

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

大きいサイズ

Bootstrapのデフォルトもあり、文字はhoverでふわっとopacityがかかっていますが、下線はキッと非表示に切り替わってしまいます。やはりtext-decoration: none;を使うとdisplay: none;ばりにtransitionが効きませんね。

追記220701: この記事を書いた当時は効いてたのですが、hover時の「ふわり」が効かなくなっています。

下線の色を透明からhoverで色指定へ(transparent)

text-decoration-colorを使ってみます。
最初はtext-decoration-color: currentColor;でテキストと同じ色になるよう指定しておいて、hoverしたらtext-decoration-color: transparent;で下線を透明にします。

英文

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

日本語

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

大きいサイズ

何回かマウスオン、マウスアウトして確認してみていただきたいのですが、透明→色が付くときはtransitionが効いてますが、逆の色付き→透明の場合は効いてませんね。

追記220701: こちらも記事を書いたときと反応が変化しました。マウスオン、マウスアウト共にtransitionが効いてます。

下線の色を透明からhoverで色指定へ(rgba)

text-decoration-colorの指定をrgbaにして、opacityに該当する部分の数値を変更してみたらどうでしょう?

英文

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

日本語

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

大きいサイズ

うーん、やはり色付き→透明の場合は効いてませんね。色の問題ではなくhoverになったときの変化自体が効かないようです。

追記220701: こちらも記事を書いたときと反応が変化しました。マウスオン、マウスアウト共にtransitionが効いてます。

keyframesを使って下線のopacityを変化させる

簡単にアレンジしたいという当初の意図からズレてきた気がしますが、こうなったらkeyframesを使いましょう。説明するよりCSSを貼りますね。

.underline-hover-anime {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	animation: anim-out .5s ease-out forwards;
}
.underline-hover-anime:hover{
	animation: anim .5s ease-out forwards;
	opacity: 1;
}
@keyframes anim {
  0% {opacity:1;}
  100% {opacity: 0;}
}
@keyframes anim-out {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
英文

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

日本語

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

大きいサイズ

さあ! hoverで下線どころか文字ごとふわっと消えました……そりゃそうか……。仕事でこれやったら上司に「わざとふざけたことをやってるのかな?」と思われて詰められるパターンです。わざじゃなくてバカなんです😩

できなかったことを載せなくてよくない?とお思いでしょうが、ここまで「これをやるとこうなる」という検証結果として残しています。

back to top