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:

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

Ektron CMS400.NET Version 7.6 delivers all of the flexibility and features you need to deploy the Web site you want, quickly and efficiently. learn more...       6 ways to take your site to the next level with Ektron: Create site stickiness through social networking. Keep it personal, relevant and interactive and they'll come back for more. Keep it open. Your site needs to be ready and able to connect to outside services. Ektron's open API gives you maximum flexibility. Streamline content and document management. Users need to quickly and intuitively find and add information. Empower your content authors. Reduce IT bottlenecks by allowing business users to create and edit Web content and forms. Climb to the top of search rankings. SEO tools, URL aliasing and eCommerce for your digital marketing strategy Add powerful Web 2.0 tools like blogs, wikis, forums, geo-mapping, rating systems and RSS feeds easily. See why there are 20,000+ Ektron integrations worldwide. Request an INSTANT DEMO or download a FREE TRIAL today.