CSS :first-letter pseudo-element

CSS Web Development Front End Technology

Use this element to add special style to the first letter of the text in a selector. The following example demonstrates how to use the :first-letter element to add special effects to the first letter of elements in the document.

Example

Live Demo

<html>
   <head>
      <style>
         p:first-letter {
            font-size: 5em;
         }
         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 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 pseduo
         element to give effect to the first characters of any HTML element.
       </p>
   </body>
</html>

Ankith Reddy

Published on 30-Apr-2018 11:22:51

Previous Page Print Page