Pseudo-element ::first-line trong CSS

Giới thiệu

Pseudo-element ::first-line áp dụng style cho dòng đầu tiên của một block-level element (như <p>, <div>). Dòng đầu tiên được xác định bởi chiều rộng container, không phải bởi thẻ <br>.

Cú pháp

selector::first-line {
  /* các thuộc tính cho phép */
  color: red;
  font-weight: bold;
  text-transform: uppercase;
}

Ví dụ: Gạch chân dòng đầu tiên

<!DOCTYPE html>
<html>
<head>
  <style>
    p::first-line {
      text-decoration: underline;
      color: #2c3e50;
      font-weight: 600;
    }
    p.no-underline::first-line {
      text-decoration: none;
    }
  </style>
</head>
<body>
  <p class="no-underline">Dòng này KHÔNG bị gạch chân vì thuộc class no-underline.</p>
  <p>Dòng đầu tiên của đoạn này sẽ được gạch chân. Các dòng tiếp theo trong cùng đoạn văn sẽ giữ nguyên style bình thường. Đây là minh họa cho ::first-line pseudo-element.</p>
</body>
</html>

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

Chỉ một tập hợp thuộc tính nhất định áp dụng được cho ::first-line:

• Font: font, font-family, font-size, font-weight, font-style, font-variant
• Color: color
• Background: background-color, background-image, background-position, background-repeat, background-size, background-attachment
• Text: text-decoration, text-transform, letter-spacing, word-spacing, line-height, text-shadow
• Khác: vertical-align, clear, float

Lưu ý quan trọng

• Chỉ hoạt động trên block-container (không phải inline element)
• Số lượng ký tự trong dòng đầu tiên thay đổi khi resize màn hình → style tự động cập nhật
• Không thể dùng ::first-line trên element có display: inline hoặc inline-block
• CSS3 khuyến nghị dùng ::first-line (hai dấu hai chấm)