疑似要素で種類の違うボーダーを引く

↑のh1見出しとか、サイドバーのh3に使ってるボーダーですが、今まで色の異なるボーダーの引き方がわからなくて、いつも背景画像を使っていました。

背景画像を使わずにCSSだけでなんとかしたかった。

で、天から聞こえて来た声が「:after使えばいいじゃない」。

[css]#content article h1 {
font-weight: bold;
font-size: 150%;
text-shadow: 0 0 2px rgba(6, 45, 124, 0.8);
color: #fff;
padding: 0 0 10px 0;
border-bottom: 1px solid #aec5e1;
margin: 0 0 10px 0;
}

#content article h1:after {
border-bottom: 1px solid #5e8ec5;
content: "";
display: block;
height: 1px;
margin: 0 0 -10px;
}
[/css]
:afterの時に、「content=””」と「height:1px」を入れないとそもそもレンダリングされなかったので、仕方なく入れました。
「margin: 0 0 -10px」は位置の調整用です。

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください