CSS - Pseudo-element - ::first-letter
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:
Font related properties
Background related properties
Margin related properties.
Padding related properties.
Border related properties.
Color property
If float is none: line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align
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>
To Continue Learning Please Login
Login with Google