CSS :first-letter pseudo-element
 Complete CSS Reference
Definition
The :first-letter pseudo-element adds a special style to the first letter of a text.
Examples
The "first-letter" pseudo-element is used to add special style to the first
letter of the text in a selector:
p {font-size: 12pt}
p:first-letter {color:#ff0000;font-size:xx-large}
<p>The first words of an article...</p>
|
The output could be something like this:
|
The first
words of an
article... |
Note:
The "first-letter" pseudo-element can only be used with block-level elements.
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.
Try-It-Yourself Demos
Make the first letter special
This example demonstrates how to add a special effect to the first
letter of a text.
Make the
first letter and first line special
This example demonstrates how to add a special effect to the first letter and
the first line of a text.
Complete CSS Reference
Learn XML with <oXygen/> XML Editor - Free Trial!
 |
|
oXygen helps you learn to define,
edit, validate and transform XML documents. Supported technologies include XML Schema,
DTD, Relax NG, XSLT, XPath, XQuery, CSS.
Understand in no time how XSLT and XQuery work by using the intuitive oXygen debugger!
Do you have any XML related questions? Get free answers from the oXygen
XML forum
and from the video
demonstrations.
Download a FREE 30-day trial today!
|
| 
HOME
Printer friendly page
