::first-line pseudo-element

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

CSS 2.1, Section 5.12.1Internet Explorer 9

 

Syntax

sel::first-line {...}

Parameters

sel

A simple selector.

Standards information

Remarks

The background, clear, color, font, font-family, font-size, font-style, font-variant, font-weight, line-height, text-decoration, text-transform, vertical-align, and word-spacing 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 document 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.

In versions of Windows Internet Explorer prior to Windows Internet Explorer 9, as well as in IE8 Standards mode and earlier, only the one-colon form of this pseudo-element is recognized—that is, :first-line.

Beginning with Internet Explorer 9, the ::first-line pseudo-element requires two colons, though the one-colon form is still recognized and behaves identically to the two-colon form. Microsoft and the World Wide Web Consortium (W3C) encourage web authors to use the two-colon form of the ::first-line pseudo-element. For more information, see the Pseudo-elements section of the W3C's CSS3 Selectors specification.

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.

Click to view sample.

CSS
Copy 

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

The following rules illustrate the cumulative effect of attaching ::first-line and ::first-letter pseudo-elements to an element.

Click to view sample.

CSS
Copy 

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

The following example uses the ::first-line pseudo-element to create a typographical effect that looks like a column in a newspaper.

Click to view sample.

JavaScript
Copy 

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

See also

::first-letter

 

 

Show: