CSS CSS CSS

Two Pseudo-elements You Can Use

July 20, 2008 @ 9:43 am

Today on CSS-Discuss a user asked a question about the pseudo-element “:first-letter”. Having started designing websites when Netscape 4 was still a consideration I find it hard to unlearn a lot of things. I’ve been afraid to try stranger parts of CSS like pseudo-elements for a while and just never consider them when I’m designing a site. I decided to do a rough test of which pseudo-elements work and which do not.

There are 4 pseudo-elements defined by the W3C:

1. :first-letter
2. :first-line
3. :before
4. :after

You can so some amazing stuff with “:before” and “:after” in a browser that supports them, but unfortunately only “:first-letter” and “:first-line” are supported in all the major browsers.

Applying “:first-letter” and “:first-line” to a class or ID assigned to an HTML tag in this way “p:first-letter” looks like this:

First letter is blue.

First line in this paragraph is green. Lorem Ipsum is simply dummy text of the printing and typesetting industry.

I’m adding them to my mental toolbox.

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website