文字に下線を引くとき、私が毎回使うのが「border-bottom」
こちらは、直線だけでなく点線や破線にもできるので大変便利なプロパティです。
border-bottom以外にも下線を引く方法があったので、ちょこっとご紹介します。
text-decorationで下線を引く
使い方は、boder-bottomと同じで下線を引きたい文字にtext-decoration: underline;を追加するだけ。文字の色に合わせて線の色も変わります。
太さや点線や破線などの種類を指定することはできないので、活躍の場は少なめ。
backgroundでマーカーのような線を引く
最近よく使用しているのがbackgroundを用いた方法。下線というより、蛍光マーカーのような太めの線を引く時に活躍しています。
プロパティ内のtransparentとは「透明」という意味で、透明部分の割合を多くすればするほど線が細くなる、という仕組み。
色々いじってみたらグラデーションにもなりました（使い所はあるのでしょうか？）
線を引く際の参考にしてみてくださいませ〜。
コメント