Pseudo-elements

5.1 Các pseudo-element cơ bản

Pseudo-element trong CSS cho phép dev thêm style và nội dung vào các phần của tài liệu mà không thể chọn bằng selector thông thường. Chúng tạo ra các "phần tử ảo", có thể được styled như thể chúng là một phần của HTML-markup. Đây là công cụ mạnh mẽ để tạo các layout phức tạp và cải thiện giao diện web.

Pseudo-element là gì?

Pseudo-element là các từ khóa được thêm vào selector, giúp bạn style một số phần nhất định của element. Chúng tạo ra các phần tử ảo trở thành một phần của giao diện trực quan, nhưng không thay đổi markup HTML gốc. Pseudo-element thường được dùng để style chữ cái đầu, dòng đầu tiên của văn bản, thêm các yếu tố trang trí và các nhiệm vụ khác.

Các pseudo-element cơ bản

Một số pseudo-element thường được sử dụng bao gồm:

• ::before: thêm nội dung trước nội dung của element được chọn
• ::after: thêm nội dung sau nội dung của element được chọn
• ::first-letter: style chữ cái đầu tiên của element
• ::first-line: style dòng đầu tiên của element
• ::selection: style phần văn bản được người dùng chọn

Cách sử dụng pseudo-element

Pseudo-element trong CSS được đánh dấu bởi hai dấu hai chấm (::), mặc dù một số pseudo-element vẫn hỗ trợ cú pháp cũ với một dấu hai chấm (:) để tương thích ngược.

Cú pháp:

    
      selector::pseudo-element {
        property: value;
        property: value;
        property: value;
        ...
      }
    
  

5.2 Ví dụ sử dụng pseudo-element

1. Thêm yếu tố trang trí

Pseudo-element thường được dùng để thêm yếu tố trang trí trước hoặc sau nội dung của element:

    
      /* Thêm icon trước text của link */

      a::before {
        content: "🔗";
        margin-right: 5px;
      }

      /* Thêm yếu tố trang trí sau đoạn văn */

      p::after {
        content: "❦";
        display: block;
        text-align: right;
        color: red;
      }
    
  

Trong ví dụ này, pseudo-element ::before và ::after được dùng để thêm icon trước text của link và yếu tố trang trí sau đoạn văn.

2. Style chữ cái đầu và dòng đầu tiên

Pseudo-element có thể được dùng để style chữ cái đầu hoặc dòng đầu tiên của văn bản, thường được sử dụng trong typography:

    
      /* Style chữ cái đầu của đoạn văn */

      p::first-letter {
        font-size: 2em;
        font-weight: bold;
        color: #3498db;
      }

      /* Style dòng đầu tiên của đoạn văn */

      p::first-line {
        font-weight: bold;
        color: #e74c3c;
      }
    
  

Trong ví dụ này, pseudo-element ::first-letter và ::first-line được dùng để style chữ cái đầu và dòng đầu tiên của đoạn văn.

3. Highlight text

Pseudo-element ::selection được dùng để style phần văn bản mà người dùng chọn:

    
      /* Style text được chọn */

      ::selection {
        background-color: #3498db;
        color: white;
      }
    
  

Trong ví dụ này, text được chọn bởi người dùng sẽ có nền xanh và chữ trắng.

5.3 Đặc điểm và hạn chế của pseudo-element

Hạn chế:

• Chỉ sử dụng được một lần: pseudo-element ::before và ::after chỉ có thể được sử dụng một lần trên mỗi element
• Yêu cầu content: pseudo-element ::before và ::after yêu cầu sử dụng thuộc tính content, kể cả khi nó trống
• Tương thích trình duyệt: trình duyệt hiện đại hỗ trợ cú pháp hai dấu hai chấm cho pseudo-element, nhưng với các pseudo-element cũ, một dấu hai chấm vẫn hoạt động

Ví dụ sử dụng thuộc tính content

    
      /* Ví dụ sử dụng pseudo-element trống làm yếu tố trang trí */

      div::before {
        content: "";
        display: block;
        width: 100%;
        height: 10px;
        background-color: #3498db;
      }
    
  

Trong ví dụ này, pseudo-element trống ::before được dùng để thêm một dải trang trí trước nội dung của div.