[HTML & CSS General] 見出し要素に対してテキストの幅に合わせた下線と中央寄せのスタイルを付ける

CMS が出力する要素に対してスタイリングをする場合、Wrapper div の追加は行われないことが多いでしょう。
そのため1つの要素で装飾をできるように CSS を書く必要が出てきます。

例えば見出し要素に対してテキストの幅に合わせた下線と中央寄せのスタイルを付けるにはどうするべきでしょうか。

CSS に慣れた方ならば `display` を利用すれば良いと直感的に分かると思いますが、私は `display: ?` の `?` が思い出せませんでした。
下記の記事でたくさん触れられていたことは思い出せたのですが。。。

> [あなたはCSSプロパティ”display”をどのぐらい知っているだろうか？ | POSTD](https://postd.cc/how-well-do-you-know-display/)

結論から言うと `display: table` を利用することで実現できます。
`inline-block` はテキストの幅は取得できますが、中央寄せのスタイルがあてられません。

See the Pen The CSS heading styling with text width underline and text align center by DriftwoodJP (@DriftwoodJP) on CodePen.

よく利用される `block`, `inline-block`, `table`, `flex` については、下記の記事が参考になりました。
ありがとうございました。

> * [左揃えの文字を横幅が自動的に伸縮する中央寄せにする3つの方法 – CSSテクニック – acky.info](https://www.acky.info/tips/css/00017.html)

## 補遺

追加の装飾について。

> * [【CSS】borderの長さを調整する方法3つ：文字に応じて可変など](https://saruwakakun.com/html-css/reference/border-length)
> * [【CSS】文字に色々なデザインの下線を引く（点線・波線・二重線・蛍光ペン風など）](https://saruwakakun.com/html-css/reference/border)
> * [CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選](https://saruwakakun.com/html-css/reference/h-design)