::first-letter CSS Pseudo Element

The ::first-letter pseudo-element in CSS is used to target and style the first letter of the first line of a block-level element, typically for typographic effects. It allows designers to create visual emphasis on the initial character of a paragraph, such as creating drop caps or oversized letters at the start of an article. This pseudo-element only applies to block-level containers, such as p, div, or blockquote, and cannot be used on inline elements like span.

One key feature of ::first-letter is that it can be combined with many CSS properties that affect text and box models, including font-size, font-weight, color, float, margin, and padding. However, certain properties such as background-color may behave differently depending on browser rendering. It is commonly used to create stylistic text enhancements without adding extra HTML markup.

The ::first-letter pseudo-element supports pseudo-class combinations and can be styled along with other pseudo-elements like ::first-line. It is important to note that it only affects the first letter that is a typographical character; punctuation marks, numbers, or symbols may be ignored depending on the browser.

Here is a simple example demonstrating its use:

<p>Typography enthusiasts often use decorative letters at the beginning of paragraphs.</p>

p::first-letter {
    font-size: 3em;
    font-weight: bold;
    color: #2a9d8f;
    float: left;
    margin-right: 0.1em;
}

In this example, the first letter of the paragraph is enlarged, bolded, colored, and floated to the left, creating a visually appealing drop-cap effect. This pseudo-element provides a clean way to enhance textual presentation while maintaining semantic HTML structure.