2020.4.3 ／ 更新日：
2022.1.10
HTML･CSS cssでテキストの横にラインを入れる方法【左右にボーダー】
cssでテキストの左右にラインを入れる手順
HTML
<p class="line">テキストの左右にライン</p>
CSS
.line {
display: flex;
align-items: center;
}
.line::before,
.line::after {
content: "";
height:1px;
flex-grow: 1;
background-color:#666;
}
.line:before {
margin-right: 10px;
}
.line:after {
margin-left: 10px;
}
See the Pen
MWwdJEE by nanami (@nanami_po)
on CodePen.
横線を入れたいテキスト要素にクラス名を付けて、cssを適応させます。
線の長さを変えたい時は擬似要素(line:before, line:after )のwidthを調整すればうまくいきます。
flex-grow: 1;
の部分を
width:任意の長さ;
に変えます。
真ん中に寄せたい場合は
margin: 0 auto;
も追記してください。
よかったら参考にしてください。
関連記事
