CSSで区切り線の中央に文字を入れるには
「または」のようなラベルを挟んだ区切り線を、擬似要素と flex の余白分配だけで作る基本形を示す。
線の長さを固定値で決めないため、文字数や画面幅が変わっても左右が自動で釣り合う。
実行確認済みは、ブラウザで実際に描画して見た目を確認したものである。
公開:
<p class="divider">または</p>
<p class="divider divider--start">ここから先は任意項目</p>.divider {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 20px;
color: #475569;
font-family: system-ui;
font-size: 14px;
}
.divider::before,
.divider::after {
content: ""; /* 空でも content は必須 */
flex: 1; /* 残り幅を左右で山分けする */
border-top: 1px solid #cbd5e1;
}
.divider--start::before {
flex: 0 0 24px; /* 左だけ固定長にしてラベルを左へ寄せる */
}テキストを flex コンテナにして、::before と ::after に flex: 1 を与えると、文字の左右へ線が伸びる。
線の長さを固定値ではなく余白の分配で決めるため、ラベルの文字数やコンテナ幅が変わっても左右の長さが自動で釣り合う。
つまずき
線が出ないときに真っ先に疑うのは content である。
擬似要素は content が指定されていないと生成されないため、空文字であっても content: "" は省略できない。
また擬似要素は既定でインラインなので、flex: 1 が効くのは親が display: flex になっている場合に限られる。
線そのものは高さを持たない border-top で描くのが扱いやすく、height と background で描くと align-items: center の基準がずれて上下の位置合わせが難しくなる。
片側だけ短くしたいとき
ラベルを中央ではなく左寄りに置きたい場合は、左側の擬似要素だけ flex: 0 0 24px のように固定長へ切り替える。
こうすると右側だけが flex: 1 のまま残り幅をすべて取るため、ラベルの位置がコンテナ幅に関わらず左端から一定の距離に固定される。
上の例の 2 行目がこの形である。
逆に右側を固定すれば右寄せになる。
区切りの意味をどう伝えるか
この区切り線は見た目の装飾であり、擬似要素の中身は空なのでスクリーンリーダーには読み上げられない。
読み上げられるのは「または」というテキストだけで、これは意図どおりである。
一方、前後の内容が意味の上でも分かれているなら、装飾ではなく hr 要素で区切りを明示したうえで、ラベルは別の要素として置く方が構造として正確になる。
見た目だけの区切りか、文書構造上の区切りかを先に決めておくとよい。