意外と器用なtext-decorationプロパティ

線などの装飾を加えられるtext-decorationプロパティですが

下線の他にも色んな装飾に使えるのはご存じですか？

線の「形状」を変えるtext-decoration-style

text-decoration-style: wavy; /* 波線 */
text-decoration-style: double; /* 二重線 */
text-decoration-style: dashed; /* 破線 */
text-decoration-style: dotted;/* 点線 */

underlineによる下線の他にもstyleを適応させるだけで

見た目の異なる線を引くことが出来たり…

線の「色」を変えるtext-decoration-color

text-decoration-color: red;
text-decoration-color: inherit;/*下線を引いている親の値と同じに*/

colorを指定する事で自由に線の色を変えたり…

線の「太さ」を変えるtext-decoration-thickness

text-decoration-thickness: 5px;

線の太さも自由自在です！

まとめ

意外と器用なtext-decorationプロパティを紹介しました！

ちなみにIEでは一部対応していないものもあるので注意です△

正しい効果測定は、正しい計測設定から！Googleアナリティクス設定項目チェックシート（無料）

Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。