::first-letter Back

• ::first-letter is a pseudo-element which selects the first letter in the first line of a block-level element (such as a paragraph <p>), if that letter is not preceded by any other content (such as images or inline tables) on its line.
• The ::first-letter pseudo-element does not select the first letter of an inline-level element; that is, an element that has display: inline. It only works on elements that have a display value of block, inline-block, table-cell, table-caption, or list-item.
• Notice that: Punctuation(標點符號) (i.e, characters defined in Unicode in the "open" (Ps), "close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po) punctuation classes), that precedes or follows the first letter should be included in ::first-letter.

Case : select the first letter of a block quote

<p>
    "Drawing from our own ignorance, and from the united ignorance of others (most freely and generously bestowed), we mapped out the details of the campaign with glibness and ease. At Vardö we were to purchase furs to wear and horses to ride."
</p>

p::first-letter {
    font-size: 3em;
}

See the Pen vLeNgO by aleen42 (@aleen42) on CodePen.

Note

• Only a subset of properties can be used to ::first-letter:

• If an element is a list item (display: list-item), the :first-letter applies to the first letter in the principal box after the marker. User agents may ignore :first-letter on list items with list-style-position: inside.
• The first letter of a table-cell or inline-block cannot be the first letter of an ancestor element. For example, in the following markup:

<!-- the first letter of the div is not the letter "H". In fact, the div does not have a first letter. -->
<div>
    <p style="display: inline-block">
        Hello
        <br>
        Goodbye
    </p> 
    etcetera
</div>

• If both ::first-line and ::first-letter are used, the styles specified by ::first-letter override those applied by ::first-line.