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:

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>
Advertisements