text-decorationで線の位置・色・スタイルを指定【CSS】

text-decorationは文字に引く線の位置やスタイル、色などをまとめて指定できるプロパティです。

{text-decoration: -位置 -スタイル -色;}

指定できる値は「text-decoration-line」、「text-decoration-style」「text-decoration-color」の各プロパティと同じ。

値は半角スペースで区切って指定し、もし省略した場合は各プロパティの初期値が適用されます。

下記は2つとも同じ意味です。

.decoration {
　text-decoration-line: underline;
　text-decoration-style: double;
　text-decoration-color: red;
}

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

それぞれのプロパティを別々に指定しなくても、text-decorationプロパティでまとめて指定した方が楽ですよね。