今回は、よく使えそうな見出しタイトルのデザインサンプルをご紹介します。

もちろん、コピペでも使えますす。
サイトのデザインに合わせ、カスタマイズして利用してみて下さい。

*今回は「h2」と想定してご紹介しています。

[1] 見出しの下にテキストより短いライン

・サンプル

見出しの下にテキストより短いライン

CSSの記述

h2.HalfSingle {
    position: relative;
    text-align: center;
}
h2.HalfSingle::before {
    border-bottom: 8px solid #000;
    bottom: -20px;
    content: "";
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
}

HTMLの記述

<h2 class="HalfSingle">見出しの下にテキストより短いライン</h2>

[2] 見出しの下にテキストより短い2色ライン

・サンプル

見出しの下にテキストより短い2色ライン

CSSの記述

h2.HalfTwin {
    position: relative;
    text-align: center;
}
h2.HalfTwin::before {
    border-bottom: 8px solid #000;
    bottom: -20px;
    content: "";
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
}
h2.HalfTwin::after {
    border-bottom: 8px solid #ff0000;
    bottom: -20px;
    content: "";
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    left: 100px;
    width: 100px;
}

HTMLの記述

<h2 class="HalfTwin">見出しの下にテキストより短い2色ライン</h2>

[3] 左右にライン

・サンプル

左右にライン

CSSの記述

h2.LineLR {
  position: relative;
  text-align: center;
}
h2.LineLR span {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin: 0 2.5em;
  padding: 0 1em;
  background-color: #fff;
  text-align: left;
}
h2.LineLR::before {
  position: absolute;
  top: 50%;
  z-index: 1;
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ff0000;
}

HTMLの記述

<h2 class="LineLR"><span>左右にライン</span></h2>

[4] 見出しの下に左右いっぱいの2色ライン

・サンプル

見出しの下に左右いっぱいの2色ライン

CSSの記述

h2.LongTwin {
  position: relative;
  padding-bottom: .5em;
  border-bottom: 4px solid #ccc;
}
h2.LongTwin::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  z-index: 2;
  content: '';
  width: 20%;
  height: 4px;
  background-color: #3498db;
}

HTMLの記述

<h2 class="LongTwin">見出しの下に左右いっぱいの2色ライン</h2>

[5] 見出しの左に2色ライン

・サンプル

見出しの左に2色ライン

CSSの記述

h2.LeftTwin {
  position: relative;
  padding: .25em 0 .5em .75em;
  border-left: 8px solid #ccc;
}
h2.LeftTwin::before {
  position: absolute;
  left: -8px;
  bottom: 0;
  content: '';
  width: 8px;
  height: 50%;
  background-color: #3498db;
}
h2.LeftTwin::after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  width: 100%;
  height: 0;
}

HTMLの記述

<h2 class="LeftTwin">見出しの左に2色ライン</h2>

[6] 見出しに斜線のバックグラウンド

・サンプル

見出しに斜線のバックグラウンド

CSSの記述

h2.Stripe_ti {
color: #fff;
padding: 0.25em 1em;
background: -webkit-repeating-linear-gradient(-45deg, #db2021, #db2021 3px,#d11a1b 3px, #d11a1b 7px);
background: repeating-linear-gradient(-45deg, #db2021, #db2021 3px,#d11a1b 3px, #d11a1b 7px);
}

HTMLの記述

<h2 class="Stripe_ti">見出しに斜線のバックグラウンド</h2>

[7] 太めの斜線バックグラウンド

・サンプル

太めの斜線バックグラウンド

CSSの記述

h2.Stripe_ti2 {
background: -webkit-repeating-linear-gradient(-45deg, #fff, #fff 10px,#ddd 10px, #ddd 20px);
background: repeating-linear-gradient(-45deg, #fff, #fff 10px,#ddd 10px, #ddd 20px);
}

HTMLの記述

<h2 class="Stripe_ti2">太めの斜線バックグラウンド</h2>

まとめ

いかがでしたか。CSSひとつでこんなにも様々なデザインバリエーションを展開できます。
今回紹介したCSSを元にcolorやpaddingなどの変更をご自身で試してみると、勉強になるかと思います。
また、使えそうな見出しタイトルがありましたら、随時追加していきます。