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
 |
 |
 |
 |
|
The Ektron Intranet
lets you do everything you need to do on your corporate intranet and everything you want to do... all with just one application.
What can you do with the Ektron Intranet? |
 |
Navigate through content, documents, assets, colleagues and workgroups quickly and intuitively with enterprise search |
 |
Communicate with friends and colleagues with forums, message boards and corporate blogging using the new Social Networking Platform |
|
Utilize the extensive out-of-the box features or customize your site through Ektron CMS400.NET's open architecture |
 |
Promote collaboration in your organization through project workspaces where others can efficiently find information and work together |
 |
Author/edit content, manage navigation, menus, audit trails, workflow and approvals with the best in breed Content Management |
|
|
|
|
See why there are 20,000+ Ektron integrations worldwide.
|
|
 |
TAKE THE VIDEO TOUR |
 |
or download a FREE TRIAL today. |
| 
HOME
Printer friendly page
