cssで見出しをセンター表示して更に下線を短くする裏技？

2016.06.24 2021.01.27css
cssで見出しをセンター表示して更に下線を短くする裏技？

私はセンター、私はセンター つまり主役★ レスポンシブデザインなどで、見出しをセンター表示 さらに横幅100%ではない下線付きを表示したい場合が稀にあると思います。 今回は正しいか解らないけど、表現することができた方法を記載します。 まずはhtml

<div class=”h2_wrap”><h2>センターにならえ</h2></div>

そしてcss擬似擬似します。

.h2_wrap {
 text-align: center;
 }
 .h2_wrap h2 {
 position: relative;
 display: inline-block;
 padding-bottom: 15px;
 color: #fff;
 font-size: 22px;
 font-size: 1.375rem;
 }
 .h2_wrap h2::before {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 border-bottom: 5px solid #003f7e;
 width : 80% ;
 width : -webkit-calc(100% - 40px) ;
 width : calc(100% - 40px) ;
 margin: 0 auto;
 }

widthのところで短い線を表現するための指定をします。 数値のところは適当です。 短いものではなく横幅100%でもない 文字の幅分だけ下線を付けたい場合は widthの指定を無くせばよいですー！