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

「before」「after」にて線の長さと幅、線のスタイルを指定。
長さは「flex-grow」の箇所。「1」で横幅一杯にラインを表示する。
「0.1」とかで短くなる
文字の右側だけだったら「before」を消せばよいし、左側だけだったら「after」を消せばよい。
margin部分はテキスト、ライン間のmargin

HTML

<div class="title-border">テキスト</div>

1	<div class="title-border">テキスト</div>

文字の両脇にライン（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;
}

/*——　文字の両脇にライン　——*/

.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;

}

文字に右側だけにライン（CSS）

/*——　文字の右にライン　——*/
.title-border-right {
display: flex;
align-items: center;
}
.title-border-right:after {
border-top: 1px solid;
content: "";
flex-grow: 1;
}
.title-border-right:after {
margin-left: 1rem;
}

/*——　文字の右にライン　——*/

.title-border-right {