CSSで見出しに短い線を引く方法

いつの頃からか、見出しに短いラインが付いているウェブサイトをわりとよく見かけるようになった。 主に企業のサイトで見かける。

例えば以下のようなものである。

ここでは説明のため<h>要素の代わりに<div>要素を使用している。

通常CSSで<h>要素のborderプロパティを使用して線を引くと、ブロック要素なので以下のように範囲いっぱいに線が表示される。

Wikipediaの見出しなどで見かけるタイプである。

ここからが本題。 やり方はいろいろあると思うが、こういった短い線はたいてい擬似要素（::after や ::before）を使用している。

以下は前述のサンプルのソースコード。

HTML

<div class="ex_h ex_line_b">サンプル</div>

CSS

.ex_h {font-size:150%;}
.ex_line_b::after {
    content:'';
    display:block;
    width:150px;
    height:4px;
    background:#fc2;
    border-radius:6px;
}

border-radiusプロパティは線の先端を丸くするために指定。 丸くする必要がない場合は省略してよい。

企業のサイトでは見出しがセンタリングされていることも多い。

上記の例に text-align:center と margin:0 auto を追加しただけである。

HTML

<div class="ex_h ex_line_c">サンプル</div>

CSS

.ex_h {font-size:150%;}
.ex_line_c {text-align:center;}
.ex_line_c::after {
    content:'';
    display:block;
    width:150px;
    height:4px;
    background:#fc2;
    border-radius:6px;
    margin:0 auto;
}

また、ごく稀にだが上線も見かける。 その場合は擬似要素を::afterから::beforeに変更する。

以下、表示例。

また、見出しの左端に線を引く場合、普通にborderプロパティを使っても良いが、疑似要素を使用しても表示できる。

以下、表示例。

コードは以下の通り。

HTML

<div class="ex_h ex_line_left">サンプル</div>

CSS

.ex_h {font-size:150%;}
.ex_line_left {
    position:relative;
    padding:0 0 0 12px;
}
.ex_line_left::before {
    content:'';
    position:absolute;
    left:0;
    width:5px;
    height:100%;
    background:#fc2;
    border-radius:6px;
}