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;
}