2020.4.3 更新アイコン 2020.10.1
html-css

cssでテキストの横にラインを入れる方法【左右にボーダー】

  • CSS
  • WEB
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;

も追記してください。
よかったら参考にしてください。

Share Please

Read this too