CSS :first-letter Pseudo-element - จัดสไตล์ตัวอักษรแรก

ใช้ pseudo-element :first-letter เพื่อเพิ่มสไตล์พิเศษให้ตัวอักษรแรกของข้อความในเซлекเตอร์ ตัวอย่างด้านล่างแสดงวิธีใช้ :first-letter เพื่อเพิ่มเอฟเฟกต์พิเศษให้ตัวอักษรแรกขององค์ประกอบในเอกสาร

ตัวอย่าง

<html>
  <head>
    <style>
      p:first-letter {
        font-size: 5em;
      }
      p.normal:first-letter {
        font-size: 10px;
      }
    </style>
  </head>
  <body>
    <p class="normal">ตัวอักษรแรกของย่อหน้านี้จะปกติ ขนาด 10px</p>
    <p>ตัวอักษรแรกของย่อหน้านี้จะใหญ่ 5em ตามกฎ CSS ด้านบน ส่วนตัวอักษรที่เหลือจะปกติ ตัวอย่างนี้แสดงการใช้ :first-letter pseudo-element เพื่อให้เอฟเฟกต์กับตัวอักษรแรกขององค์ประกอบ HTML ใดๆ</p>
  </body>
</html>