Pseudo-elements (phần tử giả) trong CSS là các từ khóa được thêm vào selector, cho phép bạn tạo và áp dụng kiểu cho một phần cụ thể của một phần tử. Các phần tử giả không phải là phần tử HTML thực tế mà là những "phần tử ảo" được tạo ra để thao tác trên các nội dung cụ thể trong một phần tử, như các chữ cái đầu tiên, dòng đầu tiên, hoặc chèn nội dung vào trước hoặc sau phần tử.

Trong bài viết này, chúng ta sẽ khám phá các CSS Pseudo-elements phổ biến và cách sử dụng chúng hiệu quả trong việc thiết kế giao diện trang web.

1. ::before - Thêm nội dung trước phần tử

Pseudo-element ::before cho phép chèn nội dung vào trước nội dung chính của phần tử. Phần tử này không thực sự tồn tại trong HTML, nhưng nó có thể được sử dụng để thêm các nội dung như biểu tượng, hình ảnh, hoặc văn bản.

Cú pháp:

selector::before {
    content: "nội dung"; /* Bắt buộc phải có thuộc tính content */
    /* Các quy tắc CSS khác */
}

Ví dụ:

<p>Đây là đoạn văn.</p>

<style>
p::before {
    content: "🔥 ";
    font-size: 20px;
}
</style>

Giải thích:

• Trước mỗi đoạn văn sẽ có một biểu tượng lửa (🔥) được chèn vào.

2. ::after - Thêm nội dung sau phần tử

Pseudo-element ::after hoạt động tương tự như ::before, nhưng nội dung sẽ được chèn vào sau nội dung của phần tử.

Cú pháp:

selector::after {
    content: "nội dung"; /* Bắt buộc phải có thuộc tính content */
    /* Các quy tắc CSS khác */
}

Ví dụ:

<a href="https://codetuthub.com" target="_blank">Liên kết</a>

<style>
a::after {
    content: " ↗";
    color: red;
}
</style>

Giải thích:

• Sau mỗi liên kết, một biểu tượng mũi tên sẽ được chèn vào để gợi ý rằng đây là một liên kết ngoài trang.

3. ::first-letter - Chọn chữ cái đầu tiên của phần tử

Pseudo-element ::first-letter cho phép bạn chọn chữ cái đầu tiên của một đoạn văn hoặc phần tử block và áp dụng kiểu đặc biệt cho nó, thường được sử dụng để tạo hiệu ứng chữ cái lớn ở đầu đoạn văn (drop cap).

Cú pháp:

selector::first-letter {
    /* Các quy tắc CSS cho chữ cái đầu tiên */
}

Ví dụ:

<p>Đây là một đoạn văn mẫu.</p>

<style>
p::first-letter {
    font-size: 40px;
    color: red;
    font-weight: bold;
}
</style>

Giải thích:

• Chữ cái đầu tiên của đoạn văn sẽ to hơn, có màu đỏ và được bôi đậm.

4. ::first-line - Chọn dòng đầu tiên của phần tử

Pseudo-element ::first-line cho phép bạn áp dụng kiểu cho dòng đầu tiên của một đoạn văn hoặc phần tử block.

Cú pháp:

selector::first-line {
    /* Các quy tắc CSS cho dòng đầu tiên */
}

Ví dụ:

<p>Đây là một đoạn văn mẫu có nội dung dài để minh họa cho việc áp dụng kiểu cho dòng đầu tiên của đoạn văn.</p>

<style>
p::first-line {
    font-size: 20px;
    color: blue;
    text-transform: uppercase;
}
</style>

Giải thích:

• Dòng đầu tiên của đoạn văn sẽ có cỡ chữ lớn hơn, màu xanh dương và được viết hoa tất cả chữ cái.

5. ::selection - Áp dụng kiểu cho nội dung được chọn (highlight)

Pseudo-element ::selection cho phép bạn định kiểu cho nội dung khi người dùng chọn (highlight) văn bản trong trình duyệt. Đây là pseudo-element duy nhất không yêu cầu thuộc tính content.

Cú pháp:

selector::selection {
    background: màu;
    color: màu;
    /* Các quy tắc CSS khác */
}

Ví dụ:

<p>Chọn một đoạn văn bản trong nội dung này để xem hiệu ứng của `::selection`.</p>

<style>
p::selection {
    background: yellow;
    color: black;
}
</style>

Giải thích:

• Khi người dùng chọn một phần của đoạn văn, nền sẽ chuyển thành màu vàng và văn bản sẽ có màu đen.

6. ::placeholder - Áp dụng kiểu cho văn bản giữ chỗ (placeholder)

Pseudo-element ::placeholder cho phép bạn thay đổi kiểu của văn bản giữ chỗ (placeholder) trong các phần tử nhập liệu như input hoặc textarea.

Cú pháp:

input::placeholder {
    color: màu;
    opacity: giá trị;
    /* Các quy tắc CSS khác */
}

Ví dụ:

<input type="text" placeholder="Nhập tên của bạn">
    
<style>
input::placeholder {
    color: gray;
    font-style: italic;
}
</style>

Giải thích:

• Văn bản giữ chỗ (placeholder) sẽ có màu xám và kiểu chữ in nghiêng.

7. ::marker - Áp dụng kiểu cho dấu đầu dòng của danh sách

Pseudo-element ::marker cho phép bạn tùy chỉnh kiểu cho các dấu đầu dòng (bullet points) của danh sách <ul> hoặc các dấu số của danh sách <ol>.

Cú pháp:

li::marker {
    /* Các quy tắc CSS cho dấu đầu dòng */
}

Ví dụ:

<ul>
    <li>Mục 1</li>
    <li>Mục 2</li>
    <li>Mục 3</li>
</ul>


<style>
li::marker {
    color: red;
    font-size: 20px;
}
</style>

Giải thích:

• Các dấu đầu dòng của danh sách sẽ có màu đỏ và kích thước lớn hơn.

8. ::backdrop - Áp dụng kiểu cho lớp phủ của phần tử toàn màn hình

Pseudo-element ::backdrop cho phép bạn định kiểu cho lớp phủ (backdrop) xuất hiện phía sau một phần tử khi nó được mở ở chế độ toàn màn hình, ví dụ như video hoặc hình ảnh.

Cú pháp:

::backdrop {
    /* Các quy tắc CSS cho lớp phủ */
}

Ví dụ:

<video controls>
    <source src="https://codetuthub.com/example/file_MP4_1920_18MG.mp4" type="video/mp4">
</video>


 <style>
 ::backdrop {
    background-color: rgba(0, 0, 0, 0.8);
}
</style>

Giải thích:

• Khi người dùng bật chế độ toàn màn hình, lớp phủ nền sẽ có màu đen với độ mờ 80%.

9. Cách sử dụng dấu :: trong pseudo-elements

CSS pseudo-elements sử dụng cú pháp :: (hai dấu hai chấm) để phân biệt chúng với pseudo-classes (sử dụng dấu :). Tuy nhiên, trước đây các pseudo-elements như :before và :after thường sử dụng một dấu : thay vì hai dấu :: trong các phiên bản cũ của CSS. Hiện nay, hai dấu chấm :: là cú pháp chuẩn.

Cú pháp hiện tại:

selector::before { 
    /* Quy tắc CSS cho pseudo-element */
}

Cú pháp cũ (vẫn hỗ trợ):

selector:before { 
    /* Quy tắc CSS cho pseudo-element */
}

10. Tóm tắt các pseudo-elements

Kết luận

CSS pseudo-elements cung cấp cho bạn công cụ mạnh mẽ để kiểm soát và tùy chỉnh giao diện của các phần tử HTML mà không cần thay đổi cấu trúc HTML gốc. Bằng cách sử dụng các pseudo-elements như ::before, ::after, ::first-letter, và ::selection, bạn có thể tạo ra các hiệu ứng bắt mắt, tinh tế và cải thiện trải nghiệm người dùng trên trang web.