線などの装飾を加えられる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では一部対応していないものもあるので注意です△

Request Materials資料請求

Webマーケティングにおけるパフォーマンス改善のための資料がダウンロードできます。

• ● web広告の改善事例が知りたい方
• ● 現在お願いしている代理店との比較をしたい方
• ● サービスの全体像・料金を知りたい方

資料請求

サービス概要・運用方針などを掲載！
アカウント分析の資料サンプルや実際の事例などサービスをご検討の方はぜひご一読ください。

ご相談お問い合わせ

Web広告をご検討中の方はお気軽にご相談ください。
お客さまの目的や広告運用状況に合わせて、最適なWeb広告運用プランをご提案いたします。