text-decoration: 文字飾り;
-webkit-text-decoration: 文字飾り; /* ベンダープレフィックス指定 */
text-decoration-color プロパティ、text-decoration-line プロパティ、text-decoration-style プロパティ、text-decoration-thickness プロパティの指定値を任意の順序でスペースで区切って指定します。
【注意】(2023年11月22日現在)
text-decoration プロパティを使用して文字飾りの一括指定(下記使用例の 5~10)をすると Safari ブラウザでは指定の飾りが表示されません。個別プロパティで指定するかベンダープレフィックスを追加指定(下記使用例の 11~16)してください。また、ベンダープレフィックスを使用した場合でも text-decoration-thickness プロパティの値が指定されている場合(下記使用例の 16)は、Safari ブラウザでは表示されませんので個別プロパティで指定(下記使用例の 17)してください。
text-decoration プロパティおよび関連プロパティの使用例を以下に示します。
- text-decoration: none;
文字サンプル■■■■
- text-decoration: underline;
文字サンプル■■■■
- text-decoration: overline;
文字サンプル■■■■
- text-decoration: line-through;
文字サンプル■■■■
- text-decoration: line-through double;
(Safari では表示不可)
文字サンプル■■■■
- text-decoration: line-through dashed;
(Safari では表示不可)
文字サンプル■■■■
- text-decoration: line-through dotted;
(Safari では表示不可)
文字サンプル■■■■
- text-decoration: line-through double red;
(Safari では表示不可)
文字サンプル■■■■
- text-decoration: underline wavy blue;
(Safari では表示不可)
文字サンプル■■■■
- text-decoration: underline overline 6px skyblue;
(Safari では表示不可)
文字サンプル■■■■
- text-decoration: line-through double;
-webkit-text-decoration: line-through double;
文字サンプル■■■■
- text-decoration: line-through dashed;
-webkit-text-decoration: line-through dashed;
文字サンプル■■■■
- text-decoration: line-through dotted;
-webkit-text-decoration: line-through dotted;
文字サンプル■■■■
- text-decoration: line-through double red;
-webkit-text-decoration: line-through double red;
文字サンプル■■■■
- text-decoration: underline wavy blue;
-webkit-text-decoration: underline wavy blue;
文字サンプル■■■■
- text-decoration: underline overline 6px skyblue;
-webkit-text-decoration: underline overline 6px skyblue;
(Safari では表示不可)
文字サンプル■■■■
- text-decoration-line: underline overline;
text-decoration-thickness: 6px;
text-decoration-color: skyblue;
文字サンプル■■■■