アマゾンプライムデー開催中!6/22まで 

CSS 見出し<h2> 大きさの違う下線部をつけるデザインチュートリアル

見出しに横幅が異なる下線部をCSS使って実装します。

デモ

See the Pen
css title border 01
by kura (@kuranopen)
on CodePen.

HTML

<h2>ABOUT</h2>

CSS

h2 {
  position: relative;
  text-align: center;
}
h2::before {
  position: absolute;
  right: 0;
  bottom: -10px;
  left: 0;
  display: block;
  width: 25px;
  height: 1px;
  margin: 0 auto;
  content: "";
  background: #000;
}
  • 疑似要素beforeまたはafterにスタイルを当てることで実装可

太さをはheightで変更

See the Pen
css title border 01
by kura (@kuranopen)
on CodePen.

HTML

<h2>ABOUT</h2>

CSS

h2 {
  position: relative;
  text-align: center;
}
h2::before {
  position: absolute;
  right: 0;
  bottom: -10px;
  left: 0;
  display: block;
  width: 25px;
  margin: 0 auto;
  content: "";
  background: #000;
  height: 3px;
}

下線部を加えるには疑似要素を追加

See the Pen
css title border 01
by kura (@kuranopen)
on CodePen.

HTML

<h2>ABOUT</h2>

CSS

h2 {
  position: relative;
  text-align: center;
}
h2::before {
  position: absolute;
  right: 0;
  bottom: -15px;
  left: 0;
  display: block;
  width: 25px;
  height: 1px;
  margin: 0 auto;
  content: "";
  background: #000;
}
h2::after {
  position: absolute;
  right: 0;
  bottom: -10px;
  left: 0;
  display: block;
  width: 25px;
  height: 3px;
  margin: 0 auto;
  content: "";
  background: #000;
}
  • 疑似要素beforeと同じスタイルをafterにあてれば下線部を追加可能

さらに下線部を追加

See the Pen
css title border 01
by kura (@kuranopen)
on CodePen.

HTML

<h2>ABOUT</h2>

CSS

h2 {
  position: relative;
  text-align: center;
}
h2::before {
  position: absolute;
  right: 0;
  bottom: -15px;
  left: 0;
  display: block;
  width: 25px;
  height: 1px;
  margin: 0 auto;
  content: "";
  background: #000;
}
h2::after {
  position: absolute;
  right: 0;
  bottom: -10px;
  left: 0;
  display: block;
  width: 25px;
  height: 3px;
  margin: 0 auto;
  content: "";
  background: #000;
}
span::before {
  display: block;
  position: absolute;
  right: 0;
  bottom: -20px;
  left: 0;
  display: block;
  width: 25px;
  height: 1px;
  margin: 0 auto;
  content: "";
  background: #000;
}
  • 疑似要素は一つのタグに対して2つまで
  • 下線部を追加するにはなどで囲って使用する

【開催中】お得情報

デザイナーのUIメモ帳

レイアウト

ヒーローエリア

フォーム

画像

テキスト

ナビゲーション

コンテンツ

CSSデザインサンプル

モバイルサイト

Javascript

Google Map

Youtube

  • このエントリーをはてなブックマークに追加