CSS - Pseudo-element - ::first-letter

Previous
Quiz

The ::first-letter pseudo-element is used to apply special effects or styles to the first letter of the first line of a block-level element. This is only applicable when the element is not preceded by any other content, like images or inline tables.

The pseudo-element ::first-letter applies on the first letter of a text, in following scenario:

  • Punctuation that comes before or right after the first letter is taken into account for the match.

  • There are some languages which has digraphs which are capitalized together, in such cases both the letters of the digraphs are matched together by ::first-letter pseudo-element.

  • The ::first-letter pseudo-element will match the first letter of the new generated content, when ::before pseudo-element and the content property, combinely adds some text in the beginning of the element.

A small list of CSS properties can be used with ::first-letter pseudo- element, which are as follows:

Syntax

 selector::first-letter { /* ... */ }

CSS ::first-letter Example

Here is an example to show a simple usage of ::first-letter pseudo-element:

 <html> <head> <style> #flavor { display: block; font-size: 18px; color: black; width: 500px; } li { padding: 5px 5px; font-size: 16px; color: black; background-color: #fff; margin-top: 25px; width: 300px; transition: all 0.3s ease; } li::first-letter { font-size: 2em; color: crimson; } </style> </head> <body> <form> <ul id="flavor"> Ice cream Flavors: <li> Cookie dough</li> <li> Pistachio</li> <li> Cookies & Cream</li> <li> Cotton Candy</li> <li> Lemon & Raspberry Sorbet</li> </ul> </form> </body> </html>

Here is another example with special characters in the beginning of the text:

 <html> <head> <style> p::first-letter { color: blue; font-size: 2.5em; } </style> </head> <body> <p>-Hyphen</p> <p>_Underscore</p> <p>"Quotation marks</p> <p>#Hash</p> </body> </html>
Print Page
Previous
Next
Advertisements