開発者ドキュメント

CSSのテキスト装飾で下線をカスタマイズする

彼らは待つ人には良いことが起こると言います、そしてこれはウェブ上のテキスト装飾に関しては非常に真実であることがわかります。 CSSテキスト装飾モジュールレベル3は、Web上のテキストを装飾するためのいくつかの優れた新しい方法を定義しており、ブラウザーはついにそれらを適切にサポートし始めています。 別のアンダースコアの色を取得するために、適切なテキストアンダースコアの代わりに border-bottom を使用する時代は、ようやく実現する可能性があります。

結果は異なる場合があります:のサポートはまだ制限されているため、この投稿の例は、使用しているブラウザによっては正しく表示されない場合があります。

テキスト装飾

text-decoration プロパティは、 none underline overline 、およびline-の値の間でのみ選択されていました。 through ですが、新しい推奨事項では、新しい text-decoration-color text-decoration-style 、およびtext-decoration-line[の省略形になります。 X325X]プロパティ。 たとえば、色付きの二重下線は次のとおりです。

.fancy {
  -webkit-text-decoration: hotpink double underline;
  text-decoration: hotpink double underline;
}

ファンシーアンダースコア

テキスト-装飾-色

あなたが想像するのと同じように動作します。 最後に、テキストの装飾色を変更する方法!

テキスト装飾スタイル

text-decoration-style は、テキスト装飾のタイプを定義するために使用され、新しい推奨事項は、doublewavyの2つの新しい値をもたらします。

.wavy {
  text-decoration: underline;
  -webkit-text-decoration-color: salmon;
  text-decoration-color: salmon;
  -webkit-text-decoration-style: wavy;
  text-decoration-style: wavy;
}

波状の装飾

text-decoration-line

text-decoration-line は、 underline overline line-through blink の値を受け入れます(点滅はただし、非推奨):

.strike {
  -webkit-text-decoration-color: red;
  text-decoration-color: red;
  -webkit-text-decoration-line: line-through;
  text-decoration-line: line-through;
}

これを打つ

text-decoration-skip

text-decoration-skip を使用すると、要素の一部に装飾が適用されるのを回避できます。 可能な値は、オブジェクトスペースインクエッジ、およびボックス装飾です。

.ink {
  -webkit-text-decoration: darkturquoise solid underline;
  text-decoration: darkturquoise solid underline;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip: ink;
}

カバ


<p class="super">
  Getting <span style="display: inline-block;">Very</span> Fancy
</p>
.super {
  -webkit-text-decoration: peru solid overline;
  text-decoration: peru solid overline;
  -webkit-text-decoration-skip: objects;
  text-decoration-skip: objects;
}

非常にファンシーを取得する


残りの値は、ブラウザではまだ十分にサポートされていません。

text-underline-position

text-underline-position を使用すると、グリフに関連するテキスト装飾の位置を制御するさらに別の方法があります。 可能な値は、 auto under left 、およびrightです。

auto 初期値を使用すると、ブラウザは通常、装飾をテキストベースラインの近くに配置します。

.auto {
  -webkit-text-decoration: slateblue solid underline;
  text-decoration: slateblue solid underline;
  -webkit-text-underline-position: auto;
  text-underline-position: auto;
}

カバ

…そして、 under を使用して、装飾がテキストの子孫の後にどのように配置されるかに注目してください。

.under {
  -webkit-text-decoration: slateblue solid underline;
  text-decoration: slateblue solid underline;
  -webkit-text-underline-position: under;
  text-underline-position: under;
}

カバ

text-underline-positionleftおよびrightの値は、縦書きモードでのテキスト装飾を制御するために使用されます。

さあ、続けて、いくつかの派手なテキスト装飾で私たちを感動させてください!

ブラウザのサポート: 2020年現在、テキスト装飾を使用できますか?は、世界中の94% ofブラウザがプロパティを少なくとも部分的にサポートしていることを示しています。

モバイルバージョンを終了