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で下線の種類を指定できます。borderでsolidなど指定するときと大体同じかな？詳しくは下記サイトをご参照ください。

text-decoration-thickness - CSS: カスケーディングスタイルシート | MDN

text-decoration-thickness は CSS のプロパティで、要素内のテキストに用いられる装飾線、例えば取り消し線、下線、上線の太さを設定します。

text-decoration-style: dotted;

英文

日本語

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

大きいサイズ

ポラーノの広場~Porano Square~

text-decoration-style: wavy;

英文

日本語

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

大きいサイズ

ポラーノの広場~Porano Square~

下線の太さを指定する

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

text-decoration-thickness - CSS: カスケーディングスタイルシート | MDN

text-decoration-thickness は CSS のプロパティで、要素内のテキストに用いられる装飾線、例えば取り消し線、下線、上線の太さを設定します。

text-decoration-thickness: 1px;

英文

日本語

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

大きいサイズ

ポラーノの広場~Porano Square~

text-decoration-thickness: 3px;

英文

日本語

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

大きいサイズ

ポラーノの広場~Porano Square~

text-decoration-thickness: 0.1em;

英文

日本語

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

大きいサイズ

ポラーノの広場~Porano Square~

下線の色を指定する

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

text-decoration-color - CSS: カスケーディングスタイルシート | MDN

text-decoration-color は CSS のプロパティで、text-decoration-line でテキストに追加された装飾の色を設定します。

text-decoration-color: #F2CF01;

英文

日本語

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

大きいサイズ

ポラーノの広場~Porano Square~

text-decoration-color: #A67C52;

英文

日本語

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

大きいサイズ

ポラーノの広場~Porano Square~

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

英文

日本語

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

大きいサイズ

ポラーノの広場~Porano Square~

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

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

text-underline-offset - CSS: カスケーディングスタイルシート | MDN

text-underline-offset は CSS のプロパティで、 (text-decoration を使用して適用された) 下線のテキスト装飾線の本来の位置からのオフセット距離を設定します。

text-underline-offset: 3px;

英文

日本語

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

大きいサイズ

ポラーノの広場~Porano Square~

text-underline-offset: 0.5em;

英文

日本語

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

大きいサイズ

ポラーノの広場~Porano Square~

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

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

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

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

英文

日本語

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

大きいサイズ

ポラーノの広場~Porano Square~

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

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

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

text-decoration-line - CSS: カスケーディングスタイルシート | MDN

text-decoration-line は CSS のプロパティで、下線や上線など、要素内の文字列に使われる装飾の種類を設定します。

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

英文

日本語

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

大きいサイズ

ポラーノの広場~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;については下記サイトをご参照ください。

text-decoration-skip-ink - CSS: カスケーディングスタイルシート | MDN

CSS の text-decoration-skip-ink プロパティは、上線や下線が文字のアセンダーやディセンダーを通過するときにどのように引くのかを指定します。

英文

日本語

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

大きいサイズ

ポラーノの広場~Porano Square~

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

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

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

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

デフォルト

英文

日本語

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

大きいサイズ

ポラーノの広場~Porano Square~

~~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;で下線を透明にします。

英文

日本語

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

大きいサイズ

ポラーノの広場~Porano Square~

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

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

下線の色を透明からhoverで色指定へ（rgba）

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

英文

日本語

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

大きいサイズ

ポラーノの広場~Porano Square~

~~うーん、やはり色付き→透明の場合は効いてませんね。色の問題ではなく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;}
}

英文

日本語

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

大きいサイズ

ポラーノの広場~Porano Square~

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

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

デフォルト

英文

日本語

大きいサイズ

下線の種類を指定する

text-decoration-style: dotted;

英文

日本語

大きいサイズ

text-decoration-style: wavy;

英文

日本語

大きいサイズ

下線の太さを指定する

text-decoration-thickness: 1px;

英文

日本語

大きいサイズ

text-decoration-thickness: 3px;

英文

日本語

大きいサイズ

text-decoration-thickness: 0.1em;

英文

日本語

大きいサイズ

下線の色を指定する

text-decoration-color: #F2CF01;

英文

日本語

大きいサイズ

text-decoration-color: #A67C52;

英文

日本語

大きいサイズ

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

英文

日本語

大きいサイズ

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

text-underline-offset: 3px;

英文

日本語

大きいサイズ

text-underline-offset: 0.5em;

英文

日本語

大きいサイズ

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

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

英文

日本語

大きいサイズ

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

英文

日本語

大きいサイズ

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

英文

日本語

大きいサイズ

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

デフォルト

英文

日本語

大きいサイズ

下線の色を透明からhoverで色指定へ（transparent）

英文

日本語

大きいサイズ

下線の色を透明からhoverで色指定へ（rgba）

英文

日本語

大きいサイズ

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

英文

日本語

大きいサイズ

関連記事: