CSS Basics.com

Chapter 18 - CSS Pseudo Elements

The Syntax

The syntax for pseudo elements is a bit different than that of regular CSS, but it's real close. If you have already read chapter 11 then you are slightly ahead of the game.

selector:pseudo-element {property: value}

As you can see the only difference is that you place the pseudo element after the selector, and divide the 2 with a (:) colon.

Or you can assign a class to a pseudo element as follows

selector.p:pseudo-element {property: value}

Using the above code would style all paragraphs within the declared selector with the pseudo element.

The elements:

• first-line
• first-letter

First Line

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

p{font-size: small;}
p:first-line {font-size: medium; color: #ff0000;}

As you can see in the above example paragraphs are set to be a small font size, but the p:first-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.

Though lets say you only want to style a certain paragraph of text with the first-line element. Thats where declaring a class to the pseudo element comes into play.

first-line with class

p.special:first-line {font-size: medium; color: #ff0000;}

I have declared a class of special within my css file.

First-Line Example

This is a special sentence I wrote to demonstrate the use and look of the first-line pseudo element. As you can see the first line of this paragraph is styled differently than the rest of the text within it. All of this was done by simply adding class="special" to the opening <p> tag for this paragraph.

<p class="special">the content</p>

Where the first-line ends depends on the width of the browser window or containing element, you can resize this page and see that it adjusts as you change the size of the browser window.

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.

p{font-size: small;}
p:first-letter {font-size: medium; color: #ff0000;}

As you can see in the above example paragraphs are set to be a small font size, but the p:first-letter 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.

Though lets say you only want to style a certain paragraph of text with the first-letter element. Thats where declaring a class to the pseudo element comes into play.

first-letter with class

p.special_letter:first-letter {font-size: x-large; font-weight: bold; color: #ff0000;}

I have declared a class of special_letter within my css file.

First-Letter Example

This is a special sentence I wrote to demonstrate the use and look of the first-letter pseudo element. As you can see the first letter of this paragraph is styled differently than the rest of the characters within it. All of this was done by simply adding class="special_letter" to the opening <p> tag for this paragraph.

<p class="special_letter">the content</p>

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

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

Previous Chapter: Chapter 17 - CSS Position

Table of Contents  -   Top Of Page