The original code was p:first-child:after but I had to make it p:first-child:first-letter:after to fix a bug with safari.

(I’m pretty sure you meant <code>class</code> when you wrote <code>id</code>, regarding <code>.drop</code>, etc. No biggie, though–the context keeps it clear!)

@Dean – yes definately I really don’t see why you couldn’t do something like this. If you want I will expand on this blog post and go into the way you suggested?

@felipu – cheers, glad you like it.

@Luke – cheers for the comment mate. You’re not the first person to ask for an example, I feel a bit daft for not including it now. I’ll probably stick one up when I get back home. Good idea regarding IE6, I’ll be thinking about possible solutions now whilst lying by the pool

To handle IE6, you could always add some js to sniff the browser and wrap a span around the first character of all paragraphs within article elements.

Just a thought, but assuming this is for use on a blog, or some other form of periodical publication, it is highly likely that the paragraph is going to be following a heading of some sort,could you use advanced child selectors to target it? For example:


h1+p:first-letter{
add your styling here
}


@Eric Thank you, hope you will get some use out of it. Remember, it’s all about the progressive enhancement

(I’m pretty sure you meant class when you wrote id, regarding .drop, etc. No biggie, though–the context keeps it clear!)