CSS - Pseudo-element - ::first-letter

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:

Font related properties
Background related properties
Margin related properties.
Padding related properties.
Border related properties.
Color property
text-decoration
text-shadow
text-transform
letter-spacing
word-spacing
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>

Print Page