:first-line Pseudo-element

Applies one or more styles to the first line of the object.

Syntax

HTML :first-line { sRules }
Scripting N/A

Possible Values

sRules Value that specifies one or more Cascading Style Sheets (CSS) attribute/value pairs.

Remarks

The background, clear, color, font, fontFamily, fontSize, fontStyle, fontVariant, fontWeight, lineHeight, textDecoration, textTransform, verticalAlign, and wordSpacing properties apply to the :first-line pseudo-element.
The length of the first line depends on a number of factors, such as the width of the page and the font size.
The :first-line pseudo-element can be attached to block-level elements. It can be attached to inline elements if you set the corresponding display property to block.

Examples

The following examples show how to use the :first-line pseudo-element.
The following rule changes to uppercase the letters of the first line of elements with the specified className property.
<STYLE>
.CapFirst:first-line { text-transform: uppercase }
</STYLE>
<P CLASS="CapFirst">The first line in this paragraph will be in
all uppercase letters. Subsequent lines will render normally.  The
first line in this paragraph will have uppercase letters.
Subsequent lines will render normally.</P>
This feature requires Microsoft® Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.
The following rules illustrate the cumulative effect of attaching :first-line and :first-letter pseudo-elements to an element.
<STYLE>
.LetterAndLine:first-line   { text-transform: uppercase }
.LetterAndLine:first-letter { font-size: 200%; float: left }
</STYLE>
<P CLASS="LetterAndLine">The first letter in this paragraph will
be twice the size of the other letters in the paragraph.  The
first line in this paragraph will have uppercase letters.
Subsequent lines will render normally.  The first letter in this
paragraph will be twice the size of the other letters in the
paragraph.  The first line in this paragraph will have uppercase
letters. Subsequent lines will render normally.</P>
This feature requires Microsoft® Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.
The following example uses the :first-line pseudo-element to create a typographical effect that looks like a column in a newspaper.
<STYLE>
.col1 { border-right: black 1px solid;
padding-right: 10px;
padding-left: 5px;
width: 140px;
text-justify: newspaper
}
.newsitem:first-line { font-size: 14pt;
left: 0px;
float: left;
position: absolute;
top: 100px
}
</STYLE>
<DIV class="col1">
<DIV class="newsitem">New features in Internet Explorer 5.5 include
the first-line pseudo-element. This allows authors to create
typographical effects that are applied to the first line of a block
of text.</DIV>
</DIV>
This feature requires Microsoft® Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Standards Information

This pseudo-element is defined in CSS, Level 1 (CSS1) .

Applies To

ADDRESS, BLOCKQUOTE, BODY, CENTER, DD, DIV, DL, DT, FIELDSET, FORM, hn, LEGEND, LI, LISTING, MARQUEE, MENU, P, PLAINTEXT, PRE, XMP