Written by:
2009/04/02 08:46 AM 

Pseudo elements act like you've injected new HTML into the page and have the flexibility to style those new imaginary elements. Because we don't have direct control over them, it is the browsers responsibility to access them.

CSS 2.1 has four of them:

• :first-line allows you to style the first line of a block element
• :first-letter allows you to style the first letter of a block element
• :before allows you to inject and style content before an element, block or inline.
• :after allows you to inject and style content after an element, block or inline.

The first two pseudo-element selectors are based on traditional typesetting, where the first letter or the first line of text appears different to all other text on a page.The last two pseudo-element selectors are used to insert generated content either before or after an element on the page.

The syntax of pseudo-elements:

selector:pseudo-element {property: value}

CSS classes can also be used with pseudo-elements:

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

The :first-line Pseudo-element

The "first-line" pseudo-element gives you the ability to style the first line of any block level element, such as p tag and the div tag:

p:first-line {color:#0000ff;font-variant:small-caps}

< p>Some text that ends up on two or more lines< /p>

The output could be something like this:

In the example above the browser displays the first line formatted according to the "first-line" pseudo element. What is beyound our control is where the browse will break the first line. This depends on the size of the browser window.

Note: The "first-line" pseudo-element can only be used with block-level elements.
Note: The following properties apply to the "first-line" pseudo-element:

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

The :first-letter Pseudo-element

The first-letter pseudo-element is used to add special style to the first letter of the text in a selector. This display behaviour is similar to effects used in print mediea. Such as nespaper who whoul print the first letter of a paragraph in a different font size and colour.

p:first-letter {color:#ff0000;font-size:xx-large}

< p>The first words of an article...< /p>

The output might look something like this:

Note: The "first-letter" pseudo-element can only be used with block-level elements.
Note: The following properties apply to the "first-letter" pseudo- element: 

• 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
• clear

The :before and :after pseudo elements

These two pseudo-element selectors are used to insert other content either before or after an element on the page. The ":before" pseudo-element would normally be used to insert some content before the content of an element. For example, the style below will play a sound before each occurrence of an h1 element:

h1:before
{ 
content: url(beep.wav)
}

The ":after" pseudo-element would normally be used to insert some content after the content of an element. For example,
the style below will play a sound after each occurrence of an h1 tag:

h1:after
{
content: url(beep.wav)
}

Browser Support.

Unfortunately not all browsers support all the pseudo elements. Folowing is a table which displays  the typical browser support

IE: Internet Explorer, F: Firefox.

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

Trackback Print

Tags:

Categories:

Location: Blogs The Brave Programmer