見出しテキストの下 中央にワンポイントで丸の装飾を付ける 画像なし 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;
  border-top: 8px dotted #e66a6a;
  margin: 0.4rem auto 0;
}

DEMO

See the Pen title-sample-002 by CODE IDEA (@codeidea) on CodePen.

※ブラウザにデフォルトで付いているスタイルを消すため、リセットCSS「destyle.css」を使っています。

※CSSの指定方法は一例であり、同じ見た目を違う書き方で表現することもできます。絶対正しいというものではありません。

MEMO

見出し(H1)などに少し装飾を入れたいとき、下部中央にポイントを置くのはよくあります。

h1 に after を付けて、テキストとafterのパーツをどちらも中央寄せすることによって、下部にポイントが付いたようになります。
装飾の色や太さを変えると、雰囲気を変えることができます。

色々やり方はありますが、今回はブロックの上に線を入れて(border-top)、そこにCSSを指定しています。「8px」の数値を増減させると、点の大きさが変わって雰囲気を変えることができます。
点の横幅を増やしたい場合は、「width」の数値を増やしてください。

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