テキストの左右に水平線を引くスタイルシート
<div class="text-divider">テキスト付きの区切り線</div>
.text-divider {
display: flex;
align-items: center;
--text-divider-gap: 1rem;
}
.text-divider::before,
.text-divider::after {
content: '';
height: 10px;
background-color: #0cad31;
flex-grow: 1;
}
.text-divider::before {
margin-right: var(--text-divider-gap);
}
.text-divider::after {
margin-left: var(--text-divider-gap);
}