[CSS] 見出しやテキストに水平線ラインをつける

CSSのみで、見出しやテキストに水平線ラインをつけるサンプルです。
レスポンシブなどの可変、無地や柄などの背景ありでも大丈夫です。

コード

HTML - 両端 水平線ライン

<h2 class="line-horizontal line-horizontal--both">
    Horizontal Line
</h2>

HTML - 右端 水平線ライン

<h2 class="line-horizontal line-horizontal--right">
    Horizontal Line - Right Line
</h2>

HTML - 左端 水平線ライン

<h2 class="line-horizontal line-horizontal--left">
    Horizontal Line - Left Line
</h2>

CSS

/* line-horizontal */
.line-horizontal {
	display: flex;
	align-items: center;
	justify-content: center;
}
.line-horizontal.line-horizontal--both {
	text-align: center;
}
.line-horizontal.line-horizontal--left {
	text-align: left;
}
.line-horizontal.line-horizontal--right {
	text-align: right;
}

.line-horizontal.line-horizontal--both::before,
.line-horizontal.line-horizontal--both::after,
.line-horizontal.line-horizontal--left::before,
.line-horizontal.line-horizontal--right::after {
	content: '';
	min-width: 40px;/* 最小のライン横幅 */
	height: 1px;/* 線の太さ */
	flex-grow: 1;
	background: #000;/* 線の色 */
}
/* left line */
.line-horizontal.line-horizontal--both::before,
.line-horizontal.line-horizontal--left::before {
	margin-right: 20px;/* テキストと線の間 */
}
/* right line */
.line-horizontal.line-horizontal--both::after,
.line-horizontal.line-horizontal--right::after {
	margin-left: 20px;/* テキストと線の間 */
}

メモ

少し時間があったので、Nuxtの復習がてら、水平線ラインのCSSジェネレーターを作ってみました。
シンプルですが、よかったら使ってみてください。m(_ _)m

Horizontal Line