見出しテキストの下 中央にワンポイントで線の装飾を付ける 画像なし HTML/CSS サンプル

見出しテキストの下 中央にワンポイントで線の装飾を付ける 画像なし HTML/CSS サンプル

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を指定しても、似たような見た目のものが作れますが、今回のサンプルでは、角丸を入れたかったため、ブロックそのものを使用しています。

クラス名、各数値、色の指定、文言は用途に合わせて変えてください。

見出しカテゴリの最新記事