The syntax for pseudo elements is a bit different than that of regular CSS.

selector:pseudo-element{property:value;}

For example,

First Line

The first-line pseudo element styles the first line of text in a block level element.

For example,

This example paragraph is set to be a small font size. But the p:first-line line is set to be a medium size and a red color. The result is that the first line of all paragraphs will be red in color and a bit larger than the rest of the paragraph.

If you only want to style a certain paragraph of text with the first-line element, you will need to declare a class to the pseudo element.

You will then need to add class=”special” to the opening

tag for the paragraph.

a<p class=”special”>The content</p>

Note: where the first-line ends depends on the width of the browser window or the containing element.

The following properties can be assigned to the first-line pseudo element:

• background
• clear
• color
• font
• letter-spacing
• line-height
• text-decoration
• text-transform
• vertical-align
• word-spacing

First Letter

The first-letter pseudo element styles the first letter of text in a block level element.

For example,

This example paragraph is set to be a small font size, but the p:first-letter line is set to be a medium size and a red color. The result is that the first letter of all paragraphs will be red in color and a bit larger than the rest of the paragraph.

Again, if you only want to style a certain paragraph of text with the first-letter element, you will need to declare a class to the pseudo element.

You will then need to add class=”special” to the opening

tag for the paragraph.

<p class=”special_letter”>The content</p>

The following properties can be assigned to the first-line pseudo element:

• background
• border
• clear
• color
• float
• font
• line-height
• margin
• padding
• text-decoration
• text-transform
• word-spacing