CSS - Pseudo-element :first-letter

Advertisements

Previous Page
Next Page  

Description

The :first-letter pseudo-element is used to add special effect to the first letter of a text.

The following properties apply to the this pseudo- element −

  • font properties
  • color properties
  • background properties
  • margin properties
  • padding properties
  • border properties
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • float
  • clear

Example

Following is the example which demonstrates how to use :first-letter element to add special effect to the first letter of elements in the document.

Live Demo 
<html>
   <head>
      <style type = "text/css">
         p:first-letter { font-size: 3em; }
         p.normal:first-letter { font-size: 10px; }
      </style>
   </head>
   
   <body>
      <p class = "normal"> 
         First character of this paragraph will be normal and 
         will have font size 10 px;
      </p>
   
      <p>
         The first character of this paragraph will be 5em big and in red 
         color as defined in  the CSS rule above. Rest of the characters in 
         this paragraph will remain normal. This example shows how to use 
         :first-letter pseudo element to give effect to the first
         characters of any HTML element.
      </p>
   </body>
</html>

This will produce following black link −

Advertisements