彼らは待っている人には良いことが来ると言います、そしてこれはウェブ上のテキスト装飾に関しては非常に真実であることがわかります。 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 :最後に、テキスト装飾がグリフディセンダーと重ならないようにする方法:
.ink {
  -webkit-text-decoration: darkturquoise solid underline;
  text-decoration: darkturquoise solid underline;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip: ink;
}

カバ


  • objects :テキスト装飾は、inline-blockの表示を持つ要素をスキップします。 これは初期値でもあります。
<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;
}

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


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

  • スペース:装飾はスペースと句読点をスキップします。
  • edges :テキスト装飾のある2つの要素が隣り合っている場合にギャップを作成します。
  • box-decoration :装飾は、継承されたマージン、パディング、または境界線をスキップします。

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ブラウザがプロパティを少なくとも部分的にサポートしていることを示しています。