CSS can help us style the first letter of an element using the ::first-letter pseudo-element. Note that punctuation marks, digraphs and content property can change the first-letter.
The following examples illustrate CSS ::first-letter pseudo-element.
Example
<!DOCTYPE html> <html> <head> <style> body { text-align: center; } ::first-letter { font-size: 3em; color: sienna; box-shadow: -10px 0 10px green; background-color: gainsboro; } </style> </head> <body> <h2>Proin ut diam eros</h2> <p>Donec rutrum a erat vitae interdum. </p> <p>Integer eleifend lectus sit amet purus semper, ut pharetra metus gravida.</p> </body> </html>
Output
This will produce the following result −
Example
<!DOCTYPE html> <html> <head> <style> body { text-align: center; } body > * { background-color: slategrey; } ::first-letter { font-size: 1.6em; color: darkviolet; background-color: silver; text-shadow: -15px 8px palevioletred; } </style> </head> <body> <h2>Proin ut diam eros <p>Donec rutrum a erat vitae interdum. </p> <p>Integer eleifend lectus sit amet purus semper, ut pharetra metus gravida.</p> </body> </html>
Output
This will produce the following result −