k.144 Personal Note

パーソナルノート・ライフログ、気の向くまま書き綴っています。

【CSS】下線を引くのに「border-bottom」を使う

スポンサーリンク

【CSS】文字に色々なデザインの下線を引く(点線・波線・二重線・蛍光ペン風など)

HTML&CSSで下線を引く方法 普通の下線 点線・破線・二重線 蛍光ペン風 もっとオシャレな下線 はじめにCSSの指定方法を解説するので、すでにご存知の方は読み飛ばして頂ければと思います。 スキップ 文字に下線を引く方法は大きく分けて、以下の2パターンがあります。 HTMLで直接下線を指定する HTMLでclass名を付与⇒CSSで下線を指定 1つずつ解説していきます。 ...


記事内で、外枠強調したいときに


border: 5px dashed lightskyblue; padding: 20px;


なんて風によく使っているが、

これを活用すれば下線が引けてしまうんですね。


border-bottom: solid 2px orange;


こんなふうに



よし、下線は今度からこれでいこう!


ちなみに


蛍光ペン風はこんなふうに

background: linear-gradient(transparent 30%, yellow 30%);