first-line and first-letter

Browser support

Since its inception as an ASCII text only medium for the sharing of scientific papers (no style, no images, no page layout), the web has become a new medium of expression and publication. It still takes its cue from the printed page, being primarily a static medium for the expression of the type of information that traditionally has been published on paper.

Two traditional typographical effects which the developers of CSS felt it important to easily enable in web pages are provided for by the first two pseudo element selectors which were included in CSS 1.

Very often in traditional publishing the first letter and the first line of a paragraph appear differently from the rest of that paragraph.

The first-line selector selects the first line of a particular type of element, for example a paragraph.

The first-letter selector selects (surprisingly enough) the first letter of an element, allowing you to create what is often termed the drop cap as well as other effects.

Note that there are a number of (logical) restrictions that apply to these two selectors. The first-line selector can only be used with introduction | block level elements. As well, it can only be used to apply certain properties: font properties, color properties, background properties, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height and clear. The first letter selector can likewise only be used with block level elements, and it can only be used to apply the following properties: font properties, color properties, background properties, margin properties, padding properties, border properties, text-decoration, vertical-align (only if float is none), text-transform, line-height, float, and clear.

before and after

Browser support

CSS 2 introduced two new pseudo element selectors, before and after. These are used in together with the generated content features of CSS to insert content either before or after an element.

The before pseudo element selector selects an element and allows content (text, images and other content) to be inserted before the selected element. The after pseudo selector selects an element and allows the insertion of content after the selected element. For more on these, see the section on Generated Content.

Why are these called pseudo element selectors? Think about this: is there an HTML element for the first letter of an element? What about the first line? No. So, when we "select" the first line, we are really inventing something to select, which isn't in the HTML. That's why we refer to these as pseudo elements.

Syntax

The form of the first-line selector is the name for the element, followed by :first-line.

For example, the selector which selects the first line of every blockquote is:

blockquote:first-line

and that which selects the first-line of every paragraph is:

p:first-line

The first-letter selector is almost identical, replacing letter for line. The first letter of a blockquote would be selected by the following:

blockquote:first-letter

while the first letter of a paragraph is selected with this selector:

p:first-letter

The before and after selectors are the same, but substituting the pseudo elements :before or :after.

So for example if you wanted to insert some generated content before every heading of level 1 you would use:

h1:before

And if you wanted to insert some generated content after every code sample on your page, you would use:

code:after

You can create pseudo element selectors using selectors other than type selectors as well. For example, you might want to select the first letter of all paragraphs of class important. The selector for this would be

p.important:first-letter

I started using it as a learning tool, assuming I would go back to editing my CSS in my text editor - but it is just so convenient.

Use

The first-line selector is used to give a different effect for the first line of each paragraph, or other element. The first-letter selector lets you give a drop cap effect or other effect to the first letter of an element.

Remember, the idea behind style sheets is to separate out the appearance of your pages from the content. Without these selector, it would be necessary to physically mark up the first line or first letter of a paragraph or other element to achieve these effects.

The before and after pseudo element selectors allow the insertion of content before or after an element.

There are lots and lots of uses for this - here's just one. It might be convenient to insert the text string "Chapter " before all your headings of level 1.