CSS :first-letter pseudo-element


The :first-letter pseudo-element adds a special style to the first letter of a text.


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.

 Goto CSS3 and CSS2 complete reference
CSS :first-letter pseudo-element Reviewed by 1000sourcecodes on 09:47 Rating: 5
Powered by Blogger.