タイトルなど文字の両端に中央線を入れる　CSS

その１：

前と後ろに横線を並べる。

文字間を詰めて線に見せる

http

<h2 class=”index2″>タイトル</h2>

 

CSS

index2:after{
content: “　—- “;
letter-spacing: -2px

}
.index2:before{
content: “—-　”;
letter-spacing: -2px
}

その２

<span></span>で囲み、背景の色で線を隠す

タイトル左　線は右

HTML

CSS

.index1{
position: relative;
}
.index1:before {
content: “”;
display: block;
border-top: solid 1px #e2e5e4;
width: 100%;
height: 1px;
position: absolute;
top: 50%;
z-index: 1;
}
.index1 span{
background: #fff;
padding: 0.4em 1.5em;
position: relative;
z-index: 5;
border: 1px solid #83d8d1;
font-size: 1.2em
}

タイトル真ん中、左右に線の場合は以下追加

.index1 {
text-align: center;
}

参考ページ：http://coliss.com/articles/build-websites/operation/css/css-centered-heading-horizontal-line-by-impressivewebs.html