文字の左側に罫線を引くCSS

未分類

2023.08.24

Ｈ３タグの見出しのデザインのために、H3タグの左側に罫線を引きます。

腰痛や肩こり、頭痛など痛みのスペシャリストです

こんな感じです

				
					h3 {
display: flex;
align-items: center;
}

h3:after {
content: "";
height: 1px;
flex-grow: 1;
background-color: #666;
}
h3:after {
margin-left: 1rem;
}

display: flex;

H3タグをFLEX要素にします。

align-items: center;

align-itemsプロパティは、コンテナ内のアイテムの交差軸方向（初期値では縦方向）のデフォルト揃え位置を指定する際に使用します。

今回のケースでは、文字の縦方向中央に罫線を引くために上下中央で指定しています。

h3:after {
content: "";
height: 1px;
background-color: #666; }

疑似要素:afterで高さ1px、背景色#666の空間を作ります。

flex-grow: 1

フレックスアイテムの伸び率を指定します。

疑似要素で作ったh3テキストの後ろ（右側）にflex-growを指定し、左端まで全て埋めます。