Home › Forums › CSS › Trouble creating multiple borders with pseudo elements. › Reply To: Trouble creating multiple borders with pseudo elements.
Hi Michael,
Why have you repeated the same selectors 3 times?
Each one just overrides the matched property/values of the one before.
All you need is this:
#main:after,#main .after {
content:" ";
position:absolute;
left:11px;
right:11px;
top:0;
bottom:9px;
border:1px solid #ff0000;
border-top:none;
}
Note that #main .after is for IE6 and 7 and in your original page that element is created using an IE expression and if you have dropped support for IE6 and 7 you can lose the selector #main .after.
e.g.
#main:after {
content:" ";
position:absolute;
left:11px;
right:11px;
top:0;
bottom:9px;
border:1px solid #ff0000;
border-top:none;
}
The header and logo can sit on top of the red line if you raise the z-index. They are already position:relative so z-index:2 should do the trick.
.logo,.header{z-index:2}
Note that the pseudo elements :before and :after will place generated content inside the specified element and not before or after the element.
It is akin to having two extra elements in the div like this:
<div id="main">
<span> :before content is generated here</span>
<p> Normal content is here</p>
<span> :after content is generated here</span>
</div>
Of course if the div is relatively positioned then you can absolutely place those pseudo elements anywhere you like in respect to that div but strictly speaking :before and :after refer to content in that element and not before and after the element itself.
Support for :before and :after is only IE8+ and iE8 is a little buggy with z-index on those pseudo elements so you have to double check its working.