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

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

私はセンター、私はセンター
つまり主役★

レスポンシブデザインなどで、見出しをセンター表示
さらに横幅100%ではない下線付きを表示したい場合が稀にあると思います。

今回は正しいか解らないけど、表現することができた方法を記載します。

まずはhtml

 

センターにならえ

そして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の指定を無くせばよいですー!