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
Whether you're new to XML or already an advanced user,
the user-friendly views and powerful entry helpers,
wizards, and debuggers in XMLSpy are designed to meet your XML
and Web development needs from start to finish.
- XML editor
- Graphical XML Schema / DTD editors
- XSLT 1.0/2.0 editor, debugger, profiler
- XQuery editor, debugger, profiler
- XBRL validator & taxonomy editor
- Support for Office Open XML (OOXML)
- Graphical WSDL editor & SOAP debugger
- Java, C#, C++ code generation
- And much more!
Download a free trial today!
|
|
|
| 
