• このエントリーをはてなブックマークに追加

2018年05月24日(Thu)

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

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

サンプル

見出し

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件)

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

【ソーシャルボタン】


TOP