The **`::first-letter` pseudo-element** is used to apply a style to the first letter of the first line of the block-level element. 

# Syntax

```css
::first-letter {
 // css styles
}
```

# Code 

<html>
 <head>
 </head>
 <body>
   <div id="content">
     Avul Pakir Jainulabdeen Abdul Kalam was an Indian aerospace scientist who served as the 11th President of India from 2002 to 2007. 
     He was born and raised in Rameswaram, Tamil Nadu and studied physics and aerospace engineering.
   </div>
 </body>
</html>

div::first-letter {
    color: white;
    background-color: #4B5563; 
    border-radius: 2px; 
    box-shadow: -6px 5px 0 #F2416E; 
    font-size: 250%; 
    padding: 6px 3px; 
    margin-right: 6px; 
    float: left; 
}

codemirror

In the code above, we created a `div` element with some text. In the CSS we added style to the `::first-letter` pseudo-element for the `div`. The defined style is applied to the first character of the first line of the `div`.

>The allowable properties for the pseudo-element `::first-letter` can be found [here](https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter#allowable_properties).




<html>
 <head>
 </head>
 <body>
   <div id="content">
     "A"vul Pakir Jainulabdeen Abdul Kalam was an Indian aerospace scientist who served as the 11th President of India from 2002 to 2007. 
     He was born and raised in Rameswaram, Tamil Nadu and studied physics and aerospace engineering.
   </div>
 </body>
</html>

In the code above, we used the `::first-letter` pseudo-element to apply a style for the first letter. 
The style is also included for punctuation, because `::first-letter` also matches the punctuation before and after the first letter. 
 
 

<html>
 <head>
 </head>
 <body>
   <div id="content">
     Avul Pakir Jainulabdeen Abdul Kalam was an Indian aerospace scientist who served as the 11th President of India from 2002 to 2007. 
     He was born and raised in Rameswaram, Tamil Nadu and studied physics and aerospace engineering.
     Kalam was elected as the 11th President of India in 2002 with the support of both the ruling Bharatiya Janata Party and the then-opposition Indian National Congress. 
     Widely referred to as the "People's President",[6] he returned to his civilian life of education, writing and public service after a single term. 
     He was a recipient of several prestigious awards, including the Bharat Ratna, India's highest civilian honour.
   </div>
 </body>
</html>

div::before{
    content: "Before Content";
}
div::first-letter {
    color: white;
    background-color: #4B5563; 
    border-radius: 2px; 
    box-shadow: -6px 5px 0 #F2416E; 
    font-size: 250%; 
    padding: 6px 3px; 
    margin-right: 6px; 
    float: left; 
}

If we add some content in the `::before` or `::after` pseudo-element, then the style is applied to the first letter of the final generated text. In the example above, we added: 
```
div::before{
    content: "Before Content";
}
```
The style above will add the `Before Content` string before the `div` element. In this case, the `::first-letter` styles are applied to the first letter `B` of the `Before Content` string.  

What is ::first-letter pseudo-element in CSS?

::first-letter applies styles to the first letter of the first line of a block element, including punctuation.