Create a Website
HTML
Dreamweaver
CSS Tutorial
JavaScript
FREE Hosting!
With every domain name
you register at DotEasy
you get FREE (no-ad)
one year hosting.
PLUS you get:
  • FREE Website Builder
  • FREE Blog
  • FREE Forum
  • FREE Photo Album
  • FREE Email Accounts
Get your FREE hosting today!
Home > CSS Tutorial
$0 Web Hosting

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

selector:pseudo-element{property:value;}

For example,

The Code

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

First Line

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

For example,

The Code

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

p{font-size: small;}

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

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.

The Code

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

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:

First Letter

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

For example,

The Code

p{font-size: small;}

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

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.

The Code

p{font-size: small;}

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

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:

Enjoy this tutorial?

1. Link to this page(copy/paste into your own website or blog):
2. Add this page to your favorite social bookmarks sites:
3. Add this page as your favorites. (Press Ctrl+D)