Collected by
Elizabeth Janson
Home Page

:first-line

 

: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 only be attached to a block-level element.
The :first-line pseudo-element is similar to an inline-level element, but with certain restrictions. Only the following properties apply to a :first-line pseudo-element: font properties, color properties, background properties, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow', and 'clear'.

This example shows 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>
    .blueline:first-line { text-transform: uppercase;
	font: bold 12pt Helvetica, Verdana, Arial, sans-serif;
	color:blue  }
</STYLE>
<P CLASS="blueline">The first line in this paragraph will have uppercase letters which are blue, 'bold', and in 12 pt sans-serif font. Subsequent lines will render normally. The first line in this paragraph will have uppercase letters. Subsequent lines will render normally.</P>

The first line in this paragraph will have uppercase letters which are blue, 'bold', and in 12 pt sans-serif font. Subsequent lines will render normally. The first line in this paragraph will have uppercase letters. Subsequent lines will render normally.

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

<STYLE>
    .LetterAndLine:first-line   
	{ text-transform: uppercase; color:red  }
    .LetterAndLine:first-letter 
	{ font-size: 300%; float: left; color:blue  }
</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 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.

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

Email
CSS begins here
Back to :first-letter or on to shadow workarounds.

This page is part of Elizabeth Janson's web site

http://www.oocities.org/elizatk/index.html

My other sites are the Anglican Parish of Northern Mallee,
Tetbury residents in the Eighteenth Century
my Australian Family History and Barrie, our Family Poet.