フリーランスが営業なしで受注する方法5つ

cssで下線を見出しの一部にのみ引く方法【コピペ】【よくあるデザイン】

cssで見出しの一部にのみ下線を引く方法を紹介します。最近よくあるデザインなので、コピペして使ってください。

cssで下線を見出しの一部にのみを引く完成イメージ

 

cssで下線を見出しの一部にのみ引く方法【コピペ】

とりあえず以下をコピペすれば完成です。

HTML

CSS

 

cssで下線を見出しの一部にのみ引く方法説明

CSS

まずは見出しに「position:relative;」を設定

 

擬似要素に「position:absolute;」を設定して、  leftなので位置を決定

 

一部にのみ下線を引くために、「display:inline-block;」を設定

 

見出しの色、長さ、太さなど装飾をする

 

最後にcontentの中身を無しにすればOK