Phần tử giả (pseudo element) trong CSS

Trong CSS, pseudo-element (phần tử giả) cho phép bạn tạo và định dạng các phần nội dung không tồn tại trực tiếp trong HTML. Đây là kỹ thuật giúp tăng tính linh hoạt trong thiết kế mà không cần thêm thẻ HTML mới.

Phân biệt Pseudo-element và Pseudo-class

Trước hết, cần phân biệt hai khái niệm dễ nhầm lẫn:

• Pseudo-element: Dùng để tạo ra một phần tử giả, cho phép bạn thêm hoặc định dạng một phần nội dung cụ thể (ví dụ: dòng đầu, chữ đầu, nội dung trước/sau phần tử thật). Cú pháp: ::

p::first-line {
  font-weight: bold;
}

• Pseudo-class: Dùng để mô phỏng trạng thái của phần tử thật (ví dụ: hover, active, visited...). Cú pháp: :

a:hover {
  color: red;
}

Trong CSS2 và CSS1, cả hai loại này đều dùng một dấu ":". Từ CSS3 trở đi, pseudo-element dùng cú pháp hai dấu "::" để phân biệt rõ với pseudo-class.

Các loại Pseudo-element thông dụng

::first-line và ::first-letter

Hai pseudo-element này thường dùng để định dạng đoạn văn bản đầu tiên.

<style>
  p::first-line {
    font-weight: bold;
  }

  p::first-letter {
    font-size: 1.5em;
    color: pink;
  }
</style>

<p>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore id nobis,
  aperiam ipsa obcaecati harum? Nulla voluptatum quos voluptates magnam.
</p>

Lưu ý: ::first-line và ::first-letter chỉ hoạt động với các phần tử dạng block hoặc inline-block, không hoạt động với thẻ inline.

::selection và ::marker

• ::selection: Dùng để tùy chỉnh style khi người dùng bôi đen văn bản.

(Chỉ một số thuộc tính được hỗ trợ như: color, background-color, cursor, outline.)

<style>
  p::selection {
    background-color: pink;
    color: white;
  }
</style>

<p>Hãy thử bôi đen đoạn văn này để thấy hiệu ứng.</p>

• ::marker: Dùng để thay đổi ký hiệu đánh dấu (marker) trong danh sách.

<style>
  ::marker {
    color: red;
    font-weight: bold;
  }
</style>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

::before và ::after

Hai pseudo-element phổ biến nhất, thường dùng để thêm nội dung giả vào trước hoặc sau phần tử mà không cần thay đổi HTML.

<style>
  p::before {
    content: '👉 ';
  }

  p::after {
    content: ' 👈';
  }
</style>

<p>Hello World</p>

Thuộc tính content là bắt buộc khi sử dụng ::before hoặc ::after.
Nếu không có nội dung, bạn vẫn cần viết content: ''.

Ví dụ thêm phần tử giả có style:

<style>
  p::after {
    content: '';
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: blanchedalmond;
    border-radius: 50%;
    margin-left: 10px;
  }
</style>

<p>Hello World</p>

Vì mặc định ::before và ::after là inline, nên để thiết lập kích thước (width, height), bạn cần thêm display: inline-block hoặc display: block.

Kết luận