CSS :first-letter pseudo-element
CSS :first-letter pseudo-element
Description
The :first-letter pseudo-element is used to add a special effect to the first letter of text.
The following properties apply to this pseudo-element −
- Font properties
- Color properties
- Background properties
- Margin properties
- Padding properties
- Border properties
- Text-decoration
- Vertical alignment
- Text-transform
- Line-height
- Float
- Clear float
Example
The following example demonstrates how to use the :first-letter pseudo-element to add a special effect to the first letter of an element in a document.
<html>
<head>
<style type = "text/css">
p:first-letter { font-size: 3em; }
p.normal:first-letter { font-size: 10px; }
</style>
</head> <body>
<p class = "normal">
First character of this paragraph will be normal and
will have font size 10 px;
</p>
<p>
The first character of this paragraph will be 5em big and in red
color as defined in the CSS rule above. Rest of the characters in
this paragraph will remain normal. This example shows how to use
:first-letter pseudo element to give effect to the first
characters of any HTML element.
</p>
</body>
</html>
This will produce the following black link −
