CSS - Pseudo-elemento: prima lettera

Descrizione

Lo pseudo-elemento : first-letter viene utilizzato per aggiungere un effetto speciale alla prima lettera di un testo.

Le seguenti proprietà si applicano a questo pseudoelemento:

  • proprietà dei caratteri
  • proprietà del colore
  • proprietà dello sfondo
  • proprietà del margine
  • proprietà di imbottitura
  • proprietà del bordo
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • float
  • clear

Esempio

Di seguito è riportato l'esempio che dimostra come utilizzare : elemento first-letter per aggiungere un effetto speciale alla prima lettera degli elementi nel documento.

<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>

Questo produrrà il seguente link nero: