文字の横に線（ライン）を引く方法2

文字に右側だけに短いライン
ただし、画面が狭くなるとflexboxが影響して崩れるので、折り返さないサイズに納める必要がある。

<p>タイトル</p>

文字の右側のみにラインを引く場合

p {
	display: flex;
	align-items: center;
	&::after {
		background: #333;
		content: "";
		height: 1px;
		width: 3em;
		margin-left: 1em;
	}
}

左右両方にラインを引く場合

p {
	display: flex;
	align-items: center;
	justify-content: center;
	&::before, &::after {
		background: #333;
		content: "";
		height: 1px;
		width: 3em;
	}
	&::before {
		margin-right: 1em;
	}
	&::after {
		margin-left: 1em;
	}
}

justify-content で中央揃えにしている。