CSS – アンダーラインを波線にする

アンダーラインを波線にするにはすでにプロパティが用意されています。下記のコードを使用することで波線を作成することができます。

サンプル

a{
   text-decoration:wavy underline;
}

p{
   text-decoration:wavy underline;
}

特に波線のデザインにこだわりがない場合はシンプルなコードで実装できるので便利なプロパティですね。値の指定によって色も変更すること可能です。またその他のプロパティを組み合わせることで線の太さや位置を変更することも可能です。

波線の色を変更

/* キーワード指定 */
a{
   text-decoration:red wavy underline;
}

/* カラーコード */
a{
   text-decoration:#fcba03 underline wavy;
}

/* RGB指定 */
a{
   text-decoration:rgba( 255, 42, 53, 0.3) underline wavy;
}

/* HSLA指定 */
a{
   text-decoration:hsla( 207, 100%, 86%, 1) underline wavy;
}

RGB指定、HSLAに関しては透過することも可能でした。

波線の太さを変更

線の太さはサンプルコードにサイズの値を追加することで太さを変更することが可能です。またtext-decoration-thicknessを使っても可能です。

a{
   text-decoration:2px #fcba03 underline wavy;
}

a{
  text-decoration:red underline wavy;
  text-decoration-thickness: 2px;
}

波線の位置を変更

選の位置を変更するにはtext-underline-offsetプロパティを使用することで調整可能です。

a{
  text-decoration:red underline wavy;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

線の位置を調整することで文字によって線が消えている箇所を下に調整することで線を表示できるというメリットがあります。アンダーライン一部消えている場合はtext-underline-offsetで調整することで線が表示できるようになります。

また負の数値も指定可能となっています。