文字に下線をつけると、文章の強調や見出しのデザイン性が大きく向上します。
CSSでは、下線の付け方が主に3パターンあり、それぞれ見た目や使いやすさが異なります。

ここでは、
・text-decoration
・border-bottom
・::after（疑似要素）
の3つを、コード例と特徴をわかりやすくまとめます。

---

① text-decoration（最もシンプルな下線）

コード例

p {
  text-decoration: underline;
}

特徴

・もっとも簡単に下線をつけられる
・文字のすぐ下に細い線がつく
・太さや距離などの調整はできない
・文章の強調目的に向いている

h3：見た目のイメージ

文字にぴったり密着した細い下線になります。
学校のノートやWordの標準の下線に近いイメージです。

---

② border-bottom（調整しやすく見た目がきれい）

コード例

h1 {
  border-bottom: 2px solid #333;
  padding-bottom: 4px;
}

特徴

・太さ、色、長さが簡単に調整できる
・padding-bottom で文字との距離も調整可能
・ブログや企業サイトでよく使われる
・シンプルで読みやすく、デザイン性も高い

h3：見た目のイメージ

文字の少し下に、太めの実線が表示されます。
見出しに最も自然に馴染む下線で、実用性が高いです。

---

③ ::after（デザイン性のある下線）

コード例

h1 {
  position: relative;
}

h1::after {
  content: "";
  display: block;
  width: 70%;
  height: 2px;
  background-color: #333;
  margin-top: 0.5em;
}

特徴

・文字とは別に「装飾としての線」を作れる
・線の長さや位置を自由にデザインできる
・見出し用のオシャレなラインが作れる
・ブランドイメージを出したいときに向いている

見た目のイメージ

文字より短い太めのラインが、見出しの下に独立して配置されます。
中央にアクセント線を入れるデザインに適しています。

---

3つの下線スタイルの比較

手法	見た目	調整のしやすさ	向いている用途
text-decoration	細くてシンプル	低い	文章の強調
border-bottom	すっきり自然	中	見出し全般
::after	おしゃれな飾り線	高い	デザイン性の高い見出し

---

まとめ

CSSの下線は、目的に合わせて使い分けることでデザインの完成度が大きく変わります。

・文章の強調 → text-decoration
・見出しのきれいな下線 → border-bottom
・おしゃれな見出し → ::after

自分のサイトの世界観に合わせて最適な方法を選びましょう。