CSS - Pseudo-element: huruf pertama

Deskripsi

The : pertama-surat pseudo-elemen digunakan untuk menambah efek khusus untuk huruf pertama dari teks.

Properti berikut berlaku untuk elemen pseudo- ini -

  • properti font
  • sifat warna
  • properti latar belakang
  • properti margin
  • properti padding
  • properti perbatasan
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • float
  • clear

Contoh

Berikut adalah contoh yang menunjukkan cara menggunakan : elemen huruf pertama untuk menambahkan efek khusus ke huruf pertama elemen dalam dokumen.

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

Ini akan menghasilkan tautan hitam berikut -


Language