【CSS】見出しの下に小さくアンダーを引く方法

h3またh2を上記のようにする方法（hの下にアンダーバー）を引く。

まず、基本的にh2、3にクラスを割り振ること

※HTML

<h3 class=”conse”>コンセプト</h3>
<p style=”text-align: center;”>テキストテキストテキスト</p>
<p style=”text-align: center;”>テキストテキストテキスト</p>
<p style=”text-align: center;”>テキストテキストテキスト</p>

次にCSSを追加する。CSSの参考は「サルワカさん」参照いる。
⇒https://saruwakakun.com/html-css/reference/h-design

サルワカさんのCSSをそのまま適用させると、下記のようになってしまいます。

h3.conse {←クラス指定
position: relative;
display: inline-block;
margin-bottom: 1em;
}
h3.conse:before {
content: ”;
position: absolute;
bottom: -15px;
display: inline-block;
width: 60px;
height: 5px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: black;
border-radius: 2px;
}

なので、CSSを少しいじくることが必要

h3.conse {
position: relative;
display: block;　←inline-blockからblockに変更することは改善する。
margin-bottom: 1em;
}
h3.conse:before {
content: ”;
position: absolute;
bottom: -15px;
display: inline-block;
width: 60px;
height: 5px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: black;
border-radius: 2px;
}