CSS Pseudo-elements là gì? Sử dụng CSS Pseudo-elements như thế nào?

CSS Pseudo-elements là một phần của CSS Selectors, được sử dụng để chọn các phần tử của tài liệu HTML mà không có đánh dấu nào trong tài liệu.

CSS Pseudo-elements được sử dụng để tạo ra các phần tử ảo trong tài liệu HTML, như các đường viền, các ký hiệu thêm vào các phần tử hoặc văn bản được chọn. Các pseudo-element bao gồm hai phần tử chính: ::before và ::after.

Các pseudo-elements được sử dụng để tạo ra các hiệu ứng hình ảnh và định dạng văn bản. Ví dụ, bạn có thể sử dụng pseudo-element ::before để chèn một ký hiệu trước văn bản, hoặc sử dụng pseudo-element ::after để thêm các nội dung hoặc ký hiệu vào cuối phần tử.

Khi nào sử dụng CSS Pseudo-elements

1. Khi bạn muốn thêm nội dung vào các phần tử HTML mà không cần thay đổi HTML.
2. Khi bạn muốn tạo ra các hiệu ứng trang trí trên trang web của mình.
3. Khi bạn muốn định dạng văn bản hoặc tạo các kiểu định dạng khác cho các phần tử.

Lưu ý khi sử dụng CSS Pseudo-elements

1. Các Pseudo-elements được bao quanh bởi hai dấu hai chấm (::), không được sử dụng dấu chấm đơn (.) thay cho dấu hai chấm (::).
2. Các Pseudo-elements chỉ có thể được áp dụng cho các phần tử có thuộc tính content. Nếu bạn không cung cấp thuộc tính content, phần tử không được hiển thị.
3. Bạn có thể sử dụng CSS Pseudo-elements kết hợp với CSS Animations và Transitions để tạo các hiệu ứng động.

Ví dụ:

Chúng ta có một phần tử div và muốn thêm một icon vào phía trước của nó:

<div class="myDiv">Lorem Ipsum</div>

Sử dụng CSS Pseudo-elements ::before:

.myDiv::before {
  content: "";
  background-image: url('icon.png');
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-right: 10px;
}

[icon] Lorem Ipsum

.myDiv::after {
  content: ">>>";
  font-weight: bold;
  color: red;
}

Lorem Ipsum >>>