The ::First-Letter Pseudo-Element

The ::first-letter pseudo-element is used to add a special style to the first letter of a text. The following example formats the first letter of the text in all <p> elements: 

HTML file: Displayed by browser:
<style>
p::first-letter {
     color: #ff0000;
     font-size: xx-large;
}
</style>
<body>
<p>You can use the ::first-letter pseudo-element to add a special effect to the first character of a text!</p>

<p>The second paragraph will be affected the exact same way, so you can have a very consistent look throughout a webpage.</p>
</body>

You can use the ::first-letter pseudo-element to add a special effect to the first character of a text!

The second paragraph will be affected the exact same way, so you can have a very consistent look throughout a webpage.


The following properties apply to the ::first-letter pseudo- element: 
  • font properties
  • color properties
  • background properties
  • margin properties
  • padding properties
  • border properties
  • text-decoration
  • vertical-align (only if "float" is "none")
  • text-transform
  • line-height
  • float
  • clear
Note: The ::first-letter pseudo-element can only be applied to block-level elements.

Back button Table of Contents Next button