Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

::first-letter pseudo-element

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

CSS 2.1, Section 5.12.2

Syntax

sel::first-letter {...}

Parameters

sel

A simple selector.

Standards information

Remarks

The background, border, border-bottom, border-bottom-color, border-bottom-style, border-bottom-width, border-collapse, border-color, border-left, border-left-color, border-left-style, border-left-width, border-right, border-right-color, border-right-style, border-right-width, border-style, border-top, border-top-color, border-top-style, border-top-width, border-width, clear, color, float, font, font-family, font-size, font-style, font-variant, font-weight, line-height, margin, padding, text-decoration, text-transform, and vertical-align properties apply to the ::first-letter pseudo-element.

The ::first-letter pseudo-element can be used to create common typographical effects, such as drop caps. Drop caps is the effect obtained when the first character of a paragraph is rendered in a font larger than the rest, and its baseline is lowered by at least one full line, which results in the second line of the text also being indented.

The ::first-letter 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-letter pseudo-element.

The following rule causes the first letter in the paragraph to be a drop cap that is twice the size of the other letters in the paragraph.


<style>
    P.BigFirst::first-letter { font-size: 200%; float: left }
</style>
<p class="BigFirst">The first letter in this paragraph will be 
twice the size of the other letters in this paragraph.  The first 
letter in this paragraph will be twice the size of the other 
letters in this paragraph.</p>

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

Click to view sample.


<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-letter pseudo-element to create a typographical effect that looks like a column in a newspaper.

Click to view sample.


<style>
    .col1 { border-right: black 1px solid; 
        padding-right: 10px; 
        padding-left: 5px; 
        width: 140px;
        text-justify: newspaper
        }
    .newsbite::first-letter { padding-right: 5px; 
        padding-left: 5px; 
        font-size: 24pt; 
        left: 0px; 
        float: left; 
        padding-bottom: 5px; 
        padding-top: 5px; 
        position: absolute; 
        top: 100px
        }
</style>
<div class="col1">
<div class="newsbite">Initial caps are a great a way to dress up 
your text. You can use them to draw attention to the beginning of 
an article. The initial caps used here are commonly called drop
caps.</div>
</div>

See also

::first-line

 

 

Show:
© 2014 Microsoft