CODE
<h1>お問い合わせ</h1>
h1 {
color: #2d2d2d;
font-size: 2.4rem;
letter-spacing: 0.4rem;
font-weight: bold;
text-align: center;
}
h1:after {
content: "";
display: block;
width: 4rem;
height: 0.6rem;
background: #79c06e;
border-radius: 0.3rem;
margin: 0.4rem auto 0;
}
DEMO
See the Pen title-sample-001 by CODE IDEA (@codeidea) on CodePen.
※ブラウザにデフォルトで付いているスタイルを消すため、リセットCSS「destyle.css」を使っています。
※CSSの指定方法は一例であり、同じ見た目を違う書き方で表現することもできます。絶対正しいというものではありません。
MEMO
見出し(H1)などに少し装飾を入れたいとき、下部中央にポイントを置くのはよくあります。
h1 に after を付けて、テキストとafterのパーツをどちらも中央寄せすることによって、下部にポイントが付いたようになります。
装飾の色や太さを変えると、雰囲気を変えることができます。
ブロックの border にCSSを指定しても、似たような見た目のものが作れますが、今回のサンプルでは、角丸を入れたかったため、ブロックそのものを使用しています。
クラス名、各数値、色の指定、文言は用途に合わせて変えてください。