CSSだけでボーターを重ねる
しばらく書くのをサボってしまいました--;
また今日から頑張ります。
やりたかったのはこんな感じのやつです。
一昔前なら、画像で表現していたと思うんですがスタイルシートでできるよなーと。
: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は擬似クラス非対応なので、黒いボーダーのみ表示されていました。
まあこれはこれでいいですね