News:

Build a stunning handcrafted website with IT Acumens

Main Menu

Pseudo-Elements

Started by Kalyan, Dec 14, 2008, 08:38 PM

Previous topic - Next topic

Kalyan

Pseudo-Elements

Pseudo-elements are fictional elements that do not exist in HTML. They address the element's sub-part (non-existent in HTML) and not the element itself. In CSS1 there are two pseudo-elements: 'first-line pseudo-element' and 'first-letter pseudo-element'. They can be attached to block-level elements (e.g. paragraphs or headings) to allow typographical styling of their sub-parts. Pseudo-element is created by a colon followed by pseudo-element's name, e.g:

P:first-line
H1:first-letter

and can be combined with normal classes; e.g:

P.initial:first-line

First-line pseudo-element allows sub-parting the element's first line and attaching specific style exclusively to this sub-part; e.g.:

P.initial:first-line {text-transform: uppercase}

<P class=initial>The first line of this paragraph will be displayed in uppercase letters</P>

First-letter pseudo-element allows sub-parting the element's first letter and attaching specific style exclusively to this sub-part; e.g.:

P.initial:first-letter { font-size: 200%; color: red}

<P class=initial>The first letter of this paragraph will be displayed in red and twice as large as the remaining letters</P>

src : interviewghost

Quick Reply

Warning: this topic has not been posted in for at least 120 days.
Unless you're sure you want to reply, please consider starting a new topic.

Note: this post will not display until it has been approved by a moderator.

Name:
Email:
Verification:
Please leave this box empty:
Type the letters shown in the picture
Listen to the letters / Request another image

Type the letters shown in the picture:

Shortcuts: ALT+S post or ALT+P preview