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.

#158726
paulob
Participant

Hi Michael,

Although the image ( http://www.wslmf.org/images_2/right_column_bkg.png) is 648px tall it fades seamlessly into the background and therefore the page can be any size you like. You don’t need to do anything to allow the page to grow or contract; it will just work.

I still don’t understand what you want to happen to the red border? How can it suddenly stop and go under the background on the right? I think you may need to draw a screenshot of what you want as I’m just not seeing it :)

Regarding :before and :after; a pseudo line outside the actual border of a div or table is still in the element, or am I way off? I assume that “content” is anything within an element?

I think my previous example explained it perfectly but you seem to have missed the concept still and are asking almost irrelevant questions :)

:before and :after go hand in hand with generated content (content:””). It’s the generated content that creates something for you to style even if you have empty content (just like an empty span (as in the example I gave above).

<div id="main">
  <span> :before content is generated here</span>
    <p> Normal content is here</p>
  <span> :after content is generated here</span>
</div>

When you use generated content it doesn’t actually generate the span in the html but for all purposes you can assume that you are styling an element like a span.

So your question as to whether the border is outside the div or not is mostly irrelevant. Just ask the same question regarding the html above and asking whether the span is outside the div?

It’s not outside the div it’s inside the div and inside any borders or padding on that div but that doesn’t mean you can’t use absolute positioning and then place that span to appear as though it is outside that div or indeed on top of its own borders.

It’s the same for the pseudo elements and although they are placed inline ‘before’ the content in the div or ‘after’ the content in the div you can then still absolutely place them somewhere else if needed.

You are over-thinking this a little. Just imaging the pseudo content is a span placed in the position that I have shown above and then use the normal rules of CSS to style it as you wish.

With generated content you add content like this: content:” hello”;

That would add the content ‘hello’ into the html either before or after the original content in that element depending on whether you had used before or after.

e.g. Take this html:

<div class="el">
Nice to meet you
</div>

and then add this CSS:

.el:before{
content:"hello ";
}

Which results in this:

<div class="el">
Hello Nice to meet you
</div>

Now for some effects you don’t want text but you can still style the element (as you would with an empty span) by leaving the content empty but it will still generate a box for you to style.

.el:before{
content:"";
position:absolute;
width:100px;
height:100px;
background:red;
}

Hope that explains it a little more:)