I’ve just discovered two new pseudo-classed (well new to me) These are :before and :after. You can use these to insert content before or after a selected element. If you use these along with the “content” property you can insert additional content beofre or after an element. So…
p:before {
content: "Some text out front";
}
does what it says - and adds some text out front of the <p>…</p>
On the face of it this sounds fun, but why would you want to use it – afterall, css is all about keeping content separate from style. I can think of a couple of examples – you could be wanting to change the text next to an item on the fly, say if its out of stock, or setting some marker for an active link – say to show the page you are on.
The later is where I am planning on getting stuck into this idea. Here at ee-web developers I am just about to launch a site and, as often happens, I have left the “What will the active menu links look like” question until the end (tut tut). Since the logo for the site is a real funky coffee cup (its a coffee shop afterall) I think a little cup behind or to the left of the active link might look good. I guess i could do this with a background image on the link – probably eaiser, but I want to try out these pseudo-classes!
Please let me know what you use it for!
Of course, the other big deal here is that I was reading up on how to create mobile sites … and in so doing learnt some new css – you just have to keep on learning in this game. You can de-evolve back into a dinosaur so quickly!!!