Pseudo-element ::first-letter trong CSS

Giới thiệu

Pseudo-element ::first-letter chọn chữ cái đầu tiên của dòng đầu tiên trong một block-level element. Thường dùng cho hiệu ứng Drop Cap (chữ cái đầu to, thúng vào đoạn văn) như báo chí, tạp chí.

Cú pháp

selector::first-letter {
  font-size: 3em;
  font-weight: bold;
  float: left;
  line-height: 1;
  margin-right: 0.1em;
}

Ví dụ: Drop Cap cơ bản

<!DOCTYPE html>
<html>
<head>
  <style>
    p::first-letter {
      font-size: 5em;
      font-weight: bold;
      color: #2c3e50;
      float: left;
      line-height: 0.9;
      margin-right: 0.1em;
      margin-top: 0.05em;
    }
    p.normal::first-letter {
      font-size: 1em;
      float: none;
      color: inherit;
    }
  </style>
</head>
<body>
  <p class="normal">Đoạn này không có drop cap (class normal).</p>
  <p>Đoạn này có chữ cái đầu to, thúng vào nội dung. Các ký tự còn lại giữ nguyên kích thước. Đây là hiệu ứng Drop Cap cổ điển trong thiết kế in ấn.</p>
</body>
</html>

Các thuộc tính CSS được hỗ trợ

Tương tự ::first-line, chỉ một tập hợp thuộc tính áp dụng được:

• Font: font, font-family, font-size, font-weight, font-style, font-variant
• Color: color
• Background: background-*, border-*
• Text: text-decoration, text-transform, letter-spacing, word-spacing, line-height, text-shadow, vertical-align
• Box: margin, padding, border, float, clear

Kỹ thuật Drop Cap nâng cao

<style>
  /* Drop cap với background hình tròn */
  .dropcap-circle::first-letter {
    font-size: 4em;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    width: 1.2em;
    height: 1.2em;
    line-height: 1.2;
    text-align: center;
    float: left;
    margin: 0.05em 0.15em 0 0;
    display: inline-block;
  }
  
  /* Drop cap nổi (ra khỏi khung) */
  .dropcap-raised::first-letter {
    font-size: 5em;
    line-height: 0.7;
    float: left;
    margin: -0.2em 0.1em 0 -0.3em;
    color: #e74c3c;
  }
</style>

Lưu ý quan trọng

• Chỉ hoạt động trên block-container (display: block, list-item, table-cell, table-caption, flex, grid)
• Chữ cái đầu phải là ký tự văn bản (không phải dấu câu, số, tag HTML)
• Nếu dòng đầu bắt đầu bằng thẻ inline (<span>, <strong>), ::first-letter vẫn chọn ký tự đầu tiên bên trong
• CSS3 khuyến nghị ::first-letter (hai dấu hai chấm)
• Kết hợp float: left + line-height thấp cho drop cap chuẩn