Generated Content - 5 - First-* Pseudos

If you have any comments to make regarding this test, e-mail

Browsers that are subjected to this test should support CSS1 and CSS2 generated content.


5.12.2 - Applicable Properties

These are the properties that apply to :first-letter pseudo-elements: font properties, color properties, background properties, 'text-decoration', 'vertical-align' (only if 'float' is 'none'), 'text-transform', 'line-height', margin properties, padding properties, border properties, 'float', 'text-shadow', and 'clear'.

This is not yet tested here.

5.12.2 - Punctuation

Punctuation (i.e, characters defined in Unicode in the "open" (Ps), "close" (Pe), and "other" (Po) punctuation classes), that precedes the first letter should be included.

This is not yet tested here.

5.12.3 - Combination with :before and :after

When the :first-letter and :first-line pseudo-elements are combined with :before and :after, they apply to the first letter or line of the element including the inserted text.

The following test line should collapse away to nothingness (it is an empty P):


The :before and :after pseudo elements form part of the main element's content. Each of the following three sentences should be boxed by the single dotted box.

jumped over the lazy dog

The quick brown fox jumped over

jumped over

In the following case, there should be one outer dotted box containing three boxes, the top and bottom of which have dotted borders.

This should be in the middle of two blocks with dotted borders.

Special Content

There should be five distinct lines below, each labelled with the line number:

Line Three
Line Four

The markup below should be visible:

And the <strong> markup should be visible, along with the CDC/CDO delimiters of the next sentence:

There should be no weird spacing in the next sentence:


Up to the Generated Content Tests.

Up to the Evil Tests Page.

This page is maintained by Ian Hickson (

Last updated in March 1999.