CSS :first-letter pseudo-element
 Complete CSS Reference
Example
Add a special style to the first character of a paragraph:
<html>
<head>
<style type="text/css">
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
</style>
</head>
<body>
<p>This is a text.</p>
</body>
</html> |
Try it yourself »
|
Definition and Usage
The :first-letter pseudo-element adds a style to the first character of a text.
Note: 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
Pseudo-elements can also be combined with CSS classes:
p.article:first-letter {color:#FF0000}
<p class="article">A paragraph in an article</p>
|
The example above will set the first letter of all paragraphs with class="article" to red.
Browser Support
The :first-letter pseudo-element is supported in all major browsers.
Related Pages
CSS tutorial: CSS Pseudo elements
Complete CSS Reference
| 
