CSSだけでボーターを重ねる

2015-05-192015-06-01

しばらく書くのをサボってしまいました--;

また今日から頑張ります。

やりたかったのはこんな感じのやつです。

一昔前なら、画像で表現していたと思うんですがスタイルシートでできるよなーと。

:after擬似クラスを使ってみました。

HTML

<div class="wrapper">
	<p>ヘッダー</p>
</div>

wrapper 要らないですね・・・

CSS

.wrapper,p{
	margin:0;
	padding:0;
}
p{
	position: relative;
	margin:0 auto;
	padding:20px;
	width:960px;
	border-bottom: 4px solid #333;
}
p:after{
	position: absolute;
	bottom:-4px;
	left:0;
	border-bottom: 4px solid #ccc;
	content:"";
	width:120px;
}

デベロッパーツールでの確認ですが、IE8でもちゃんと表示、IE7は擬似クラス非対応なので、黒いボーダーのみ表示されていました。

まあこれはこれでいいですね

DEMO