タイトルの左右に横線を引くCSS

:afterの疑似要素にボーダーを設定して縦中央寄せにする方法をつかってたんですよ。

こんなかんじ。これは左右でなくて、右側のみだけどね。

.group_header:after{
	content:"";
	display:block;
	border-bottom:1px #000 solid;
	position:absolute;
	top:50%;
	transform: translateY(-50%);
  	-webkit- transform: translateY(-50%);
	width:100%;
　　　　right:calc((179 / 2000 * -100vw) - 1em);
}

こんな書き方したら、スマホ表示の時にこれが原因で横スクロールが発生してね。

なので、線を引く他の方法を調べたら　タイトルの左右に横線を引くCSSをなるべく簡単に考えてみた　

この記事を見つけました。これはすばらしい。

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

HTMLはこれだけ。
<div class="title-border">これ</div>