【CSS】text-decoration - テキストの装飾

CSSのtext-decorationプロパティについてご紹介します。

text-decoration

text-decorationはテキスト装飾の一括設定プロパティです。

text-decoration: 種類（複数可） 様式 カラー 太さ;

値には種類、様式、カラー、太さを定義します。

テキスト装飾線の種類です。
個別で設定するにはtext-decoration-lineを使います。

テキスト装飾線の様式です。
個別で設定するにはtext-decoration-style。

テキスト装飾線のカラーです。
個別で設定するにはtext-decoration-colorを使います。

テキスト装飾線の太さです。
個別で設定するにはtext-decoration-thicknessを使います。

次のサンプルはテキストの装飾線を設定します。

サンプル

<style>
p {
    text-decoration: underline overline wavy red 3px;
}
</style>

<p>text text text text text</p>

プレビュー