What Does :before and :after mean?

HTML & CSS
1

I’m developing a site with The Goldilocks Approach and came across this in the layout.css file


header h2:before, header h2:after { width: 42%; }

What does this mean? I tried turning it on/off with firebug but havent been able to figure it out

2

:before and :after are there to allow you to add content either before or after an element from within the CSS. Some elements have default values for these such as li tags within a ul having the appropriate bullet defined as the before content and modern browsers that have both before and after defined as the " character for a <q> tag.

Your code is missing the content: declaration which is essential for :before and :after to be able to work - also it doesn’t make sense to give the content you didn’t include a width as their width will normally be determined by the content that you put there.

See http://www.quirksmode.org/css/beforeafter.html for an example that puta an image in the :before and text in the :after.

3

To clarify a little :before and after are used in conjunction with the content property to add content to the named element but before or after the content in that element and not before the element itself.

e.g.


<p>This is the content</p>

Now if you said:


p:before{
content:"- Before - "	
}

It would effectively be saying the same as this html:


<p>- Before - This is the content</p>

:after is the same but places the content at the end of the text instead.

Many people think it means “before” the named element but it means before the content in that element.

As Felgall said the width you have applied makes no sense and will have no effect anyway unless the content is set to display:block.


p:before{
content:"- Before - "	
display:block;
width:40%;
}