【HTML・CSS】左側に縦線がある見出しの作り方
左側に縦線がある見出しの作り方です。3パターンあります。
border-leftを使用して縦線を引く
通常だとborder-leftを使用して▼のような見出しを作ると思います。
このような見出し
こちらは簡単に作れますが、border-leftしかないのでborder-radiusで角丸にする事ができません。
疑似要素を使用して縦線を引く
見出しのサンプルです。見出しのサンプルです。見出しのサンプルです。
※フォントサイズなど調整した場合、padding,top,bottom,heightも調整が必要になります。
こちらはこのサイトでも使用している見出しです。
疑似要素を使用すると角丸の線を作れます。仮に見出しが複数行になっても線が伸びてくれます。
見出しのサンプルです。見出しのサンプルです。見出しのサンプルです。
※フォントサイズなど調整した場合、padding,text-indentも調整が必要になります。
こちらは線の長さは固定(1行分)ですが、線の分だけtext-indentを指定してあるので、見出しが2行以上になった際に線の幅分だけ字下げをしてくれます。
数値を調整してお好みの見出しを作ってみてください。