文字の横に線(ライン)を引く方法1

線は画面いっぱい引かれます。

<p class="title">タイトル</p>

文字に右側だけにライン

.title {
	display: flex;
	align-items: center;
	&::after {
		border-top: 1px solid;
		content: "";
		flex-grow: 1;
		margin-left: 1rem;
	}
}

文字の両脇にライン

.title {
	display: flex;
	align-items: center;
	&::before, &::after {
		border-top: 1px solid;
		content: "";
		flex-grow: 1;
	}
	&::before {
		margin-right: 1rem;
	}
	&::after {
		margin-left: 1rem;
	}
}

こちらのページを参考にさせていただきました。