[CSS] 画像を使わずにちょっとした区切り線やボーダーのデザイン

Demo：フラットな一本線に重なる文字

separator line 1

Demo：ちょい立体線に重なる文字

separator line 2

Demo：雑誌にありそうなボーダーの長さを自由に調整

magazine line 1

Demo：雑誌にありそうな上が太い二重線

magazine line 2

HTML

line decoration
separator line 2
magazine line 1
magazine line 2

CSS

/* フラットな一本線 */
.separator-line {
 position: relative;
 text-align: center;
}
.separator-line:after {
 content: " ";
 position: absolute;
 top: 50%;
 left: 0;
 width: 100%;
 border-bottom: #323151 1px solid;
}
.separator-line span {
 position: relative;
 padding: 0 .5em;
 background: #fff;
 font-size: 2em;
 color: #323151;
 text-transform: uppercase;
 z-index: 100;
}
/* ちょい立体線 */
.separator-line2 {
 position: relative;
 background: #323151;
 text-shadow:0 1px 0 rgba(255, 255, 255, 1);
 text-align: center;
}
.separator-line2:before, .separator-line2:after {
 content: " ";
 position: absolute;
 top: 50%;
 left: 0;
 width: 100%;
}
.separator-line2:before {
 border-bottom: 2px solid rgba(255, 255, 255, .05);
}
.separator-line2:after {
 border-bottom: 1px solid rgba(20, 20, 35, .5);
}
.separator-line2 span {
 position: relative;
 padding: 0 .5em;
 background: #323151;
 font-size: 2em;
 color: #fff;
 text-transform: uppercase;
 z-index: 100;
}
/* ボーダーの長さを自由に調整 */
.magazine-line {
 position: relative;
 line-height: 1;
 font-size: 3em;
 text-transform: uppercase;
 text-align: center;
 color: #323151;
}
.magazine-line:after {
 content: " ";
 position: relative;
 margin: .5em auto 0;
 display: block;
 width: 2em;
 border-bottom: #323151 5px solid;
}
/* 上が太い二重線 */
.magazine-line2 {
 position: relative;
 line-height: 1;
 font-size: 3em;
 text-transform: uppercase;
 text-align: center;
 color: #323151;
}
.magazine-line2:before {
 content: " ";
 position: relative;
 margin: 0 auto .5em;
 display: block;
 width: 100%;
 height:1px;
 border-top: #323151 5px solid;
 border-bottom: #323151 1px solid;
}

CSS対応状況

• CSS Generated content
• CSS3 Colors