WEB帳
テキストの後ろに水平線を引く

サンプル

見出し

HTML

<h2 class="headline"><span>見出し</span></h2>

CSS

.headline{
    position:relative;
    text-align:center;
    color:#000;
    font-size:28px;
    line-height:30px;
}
.headline:before {
    border-top:1px solid #000;
    content:"";
    position:absolute;
    top:50%;
    left:0;
    width:100%;
}
.headline span{
    background-color:#fff;
    display:inline-block;
    padding:0 0.5em;
    position:relative;
}

【参考Webサイト】

• 横に水平線のあるテキスト

コメント（0件）

テキストの後ろに水平線を引くに対するご意見、ご感想、情報提供など皆様からのコメントをお待ちしております。 お気軽にコメントしてください。

【ソーシャルボタン】

• 
• Tweet