区切り線の中央にテキストを表示するテスト
区切り線の中央にテキストを表示して、区切り線の意味を分かりやすくするテストです。
テキスト付きの区切り線
htmlソース
<div class="text-divider">テキスト付きの区切り線</div>
CSSソース
.text-divider { text-align: center; } .text-divider::before, .text-divider::after { content: ''; height: 1px; background-color: #333; flex-grow: 1; } .text-divider { display: flex; align-items: center; --text-divider-gap: 1rem; } .text-divider::before, .text-divider::after { content: ''; height: 1px; background-color: #333; flex-grow: 1; } .text-divider::before { margin-right: var(--text-divider-gap); } .text-divider::after { margin-left: var(--text-divider-gap); }