見出しの装飾をする

見出しの下にちょこっと線をつけましょう

デモはこちら

こんな感じでレイアウトしているサイトをよくみるはず。やってみましょう。

HTML

 <h2>問い合わせ</h2>

CSS

擬似要素を利用して追加します。

h2 {
text-align: center;
padding: 20px;
font-size: 40px;
position: relative;
margin: 30px;
}
h2::before {
content: "";
display: block;
border-bottom: 4px solid #ddd;
width: 40px;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 0);
}

ぜひおためしを！