どうも、ソエです。

今回は、見出しで使うことが多い二色の下線をCSSで書いてみました。

では、どうぞ。

作り方

サンプル

二色の下線を作る

HTML

<p class=”twocolor”>二色の下線を作る</p>

CSS

.twocolor{

border-bottom:#ccc 1px solid;
position:relative;

}
.twocolor:before{

content:””;
position:absolute;
bottom:-1px;
left:0;
width:120px;
height:1px;
background:#333;

}

ご閲覧ありがとうございました!

プロフィール

ソエ

愛知県産のインドア。趣味はゲームとアニメ鑑賞。高校三年生にWebに興味を持ち専門学校へ入学。写真は愛犬です。

検索

ホーム/ CSS/

二色入っている下線をCSSで作る