CSS | text-decorationのデザインサンプル集

2021-02-04CSS テキストデザイン サンプル集,CSS

CSSでtext-decorationでの下線などのスタイルを変更する方法の紹介です。

デフォルトの下線（underline）はリンクテキストに使われる事が多く、その他のテキストには利用しにくい状況ではありますが、text-decorationはリンクテキスト専用という訳ではありません。

See the Pen CSS | text-decoration styles by yochans (@yochans) on CodePen.

装飾線のスタイル（style）

「text-decoration-style」にて装飾線の種類を指定可能です。

サンプルでは「text-decoration」で一括指定していますが、「text-decoration-style」で個別に指定することができます。

text-decoration-style:  underline dotted;

ドット点、二重線、破線、波線などの種類があります。

/* style */

.underline {
	text-decoration: underline;
}

.underline-dotted {
	text-decoration: underline dotted;
}

.underline-double {
	text-decoration: underline double;
}

.underline-dashed {
	text-decoration: underline dashed;
}

.underline-wavy {
	text-decoration: underline wavy;
}

装飾線の位置（line）

/* line */
.overline {
	text-decoration: underline;
}


.overline {
	text-decoration: overline;
}

.line-through {
	text-decoration: line-through;
}

装飾線の色（color）

「text-decoration-color」にて装飾線の色を指定可能です。

サンプルでは「text-decoration」で一括指定していますが、個別に指定することができます。
また、カラーコードでの指定も可能です。

text-decoration-color: green;

/* color */

.underline-red {
	text-decoration: underline red;
}

.underline-green {
	text-decoration: underline green;
}

.underline-blue {
	text-decoration: underline blue;
}

装飾線の太さ（thickness）

「text-decoration-thickness」にて装飾線の太さを指定可能です。

サンプルでは「text-decoration」で一括指定していますが、「text-decoration-thickness」にて個別に指定することができます。

text-decoration-thickness: 4px;

サンプルでは全て4pxを指定しています。

※thicknessは「underline」を指定している場合、Chrome系ブラウザを含む一部のブラウザで反映されない場合があります（2021年現在）

/* thickness */

.underline-double-thickness {
	text-decoration: underline double 4px;
}

.underline-thickness {
	text-decoration: underline 4px;
}

.underline-dotted-thickness {
	text-decoration: underline dotted 4px;
}

.underline-dashed-thickness {
	text-decoration: underline dashed 4px;
}

.underline-wavy-thickness {
	text-decoration: underline wavy 4px;
}

.overline-thickness {
	text-decoration: overline 4px;
}

.line-through-thickness {
	text-decoration: line-through 4px;
}

装飾線のスタイル一括指定（mix）

「text-decoration」で指定可能なオプションを色々複合した指定サンプルです。

/* mix */

.underline-overline-double-green-thickness{
	text-decoration: underline overline double green 4px;
}