Pesudo Element trong CSS

Pesudo Element (Phần tử giả) trong CSS cho phép bạn tạo kiểu cho các phần tử hoặc các phần của phần tử mà không cần thêm bất kỳ ID hoặc class nào vào chúng.

Nó sẽ rất hữu ích trong những trường hợp bạn chỉ muốn tạo kiểu cho chữ cái đầu tiên của đoạn văn hoặc bạn muốn chèn một số nội dung vào trước hoặc sau một phần tử nào đó, v.v. chỉ bằng cách thay đổi CSS.

CSS3 đã giới thiệu cú pháp dấu hai chấm (::) mới cho các pesudo element để phân biệt giữa chúng và các pesudo class.

Cú pháp của pesudo element như sau:

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

Tiếp sau đây là một số pesudo element phổ biến và cách làm việc với chúng

Pesudo class ::first-line sẽ giúp bạn có thể áp dụng các CSS cho dòng đầu tiên của một đoạn text.

Quy tắc CSS trong ví dụ sau định dạng dòng đầu tiên của văn bản trong một đoạn văn. Độ dài của dòng đầu tiên phụ thuộc vào kích thước của cửa sổ trình duyệt hoặc phần tử chứa nó.

HTML:

<p>
    Dòng đầu tiên trong đoạn văn bản này sẽ được tạo kiểu bởi sự chỉ định thông qua ::first-line. Dòng đầu tiên phụ thuộc vào kích thước của phần tử chứa nó hoặc cửa sổ trình duyệt.
</p>

CSS:

p {
    width: 300px;
}
p::first-line {
    color: red;
    text-transform: uppercase;
}

Lưu ý: Các thuộc tính CSS có thể áp dụng cho ::first-line là: Các thuộc tính font, các thuộc tính background, color, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height.

Pesudo element ::first-letter giống như tên gọi của nó, được sử dụng để thêm CSS đặc biệt vào chữ cái đầu tiên của dòng đầu tiên của văn bản.

Quy tắc CSS trong ví dụ sau định dạng chữ cái đầu tiên của đoạn văn bản to hơn và in đậm.

HTML:

<p>Chữ cái đầu tiên của đoạn văn bản này sẽ được áp dụng css đặc biệt hơn thông qua ::first-letter</p>

p::first-letter {
    font-size: 50px;
    font-weight: bold;
}

Lưu ý #1: Pesudo element chỉ hoạt động nếu phần tử cha của nó là dạng block, dạng inline thì nó sẽ không hoạt động.

Lưu ý #2: Các thuộc tính chỉ áp dụng cho Pesudo element ::first-letter là: Các thuộc tính font, text-decoration, text-transform, letter-spacing, word-spacing, line-height, float, vertical-align (Chỉ khi float là none), color, margin and padding properties, border properties, background properties.

Pesudo element ::after và ::before có thể được sử dụng để chèn nội dung được tạo vào trước hoặc sau nội dung của phần tử nào đó.

Thuộc tính content được sử dụng cùng với các phần tử giả này, để chèn nội dung đã tạo.

Note: Ở bài trước, chúng ta đã sử dụng phần tử giả để thực hiện kỹ thuật clear-fix. 

Lưu ý: Để tăng khả năng đọc (tránh nhầm lẫn với pesudo class), trong CSS3 chúng ta sử dụng cú pháp ::after. Các trình duyệt vẫn chấp nhận :after như đã được giới thiệu trong CSS2.

Điều này rất tiện để làm cho phần tử phong phú thêm mà không cần chèn một phần tử thực vào trong HTML.

Bạn có thể chèn các chuỗi văn bản thông thường hoặc một đối tượng được nhúng như hình ảnh và các tài nguyên khác bằng cách sử dụng các pesudo element này.

Ví dụ:

CSS:

h1::before {
    content: url("images/sexy-girl-1.jpg");
}
h1::after {
    content: url("images/sexy-girl-2.jpg");
}

Nói chung, chúng ta chỉ cần tạo kiểu cho một đoạn văn bản nhất định hoặc các phần tử cấp khối khác với các pesudo element này.

Đây là tác dụng chính của pesudo element.

Các pesudo element có thể được kết hợp với các class khác để tạo ra hiệu ứng đặc biệt cho các phần tử có class đó.

Quy tắc CSS trong ví dụ sau sẽ hiển thị chữ cái đầu tiên của tất cả các đoạn văn có class = ‘article’ có màu đỏ và kích thước là 50px.

CSS:

p.article::first-letter {
    color: red;
    font-size: 50px;
}

Trên đây là bài viết của eLib.VN về Pesudo Element trong CSS. Như vậy là qua bài này bạn đã biết thêm về cách sử dụng pesudo element trong CSS. Trong lập trình web thực tế, để dễ dàng quản lý code hơn, các lập trình viên thường hạn chế đến mức tối đa việc thay đổi HTML. Do đó, các pesudo class hay pesudo element rất hay được sử dụng.