Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Trouble creating multiple borders with pseudo elements. Reply To: Trouble creating multiple borders with pseudo elements.

#158625
paulob
Participant

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.