HOME > CSS > 文字（タイトル）の両脇に短い横線をひく

  • 投稿日： 最終更新日：
  • カテゴリー： CSS

文字（タイトル）の両脇に短い横線をひく

ソース

<div class="bdTtl">タイトル</div>
.bdTtl {
display: flex;
align-items: center;
justify-content: center;  //全幅で線を引く場合は不要。
}
.bdTtl:before,
.bdTtl:after {
border-top: 1px solid;
content: "";
flex-grow: 1; //全幅で線を引く場合。widthで線幅を短くしたい場合は不要もしくは0（初期値が0だから）
width:5em; //全幅で線を引く場合は不要。
}
.bdTtl:before {
margin-right: 1rem;
}
.bdTtl:after {
margin-left: 1rem;
}

サンプル

文字（タイトル）の両脇に短い横線をひく

参考サイト