CSS 26 – Pseudo-Elements trong CSS

0
72

Trong bài viết ngắn này mình xin giới thiệu một phương thức đặc biệt trong css đó là Pseudo-Elements. Vậy Pseudo-Elements là gì và nó có những gì hay ho thì chúng ta sẽ cùng đi vào chi tiết bài viết để hiểu rõ hơn nhé!

Pseudo-Elements là gì?

Pseudo-Elements có thể hiểu đơn giản là phần tử giả, phần tử ảo, được sử dụng để tạo một số style đặc biệt của element được chọn.

Ví dụ, nó có thể được sử dụng để:

– Style cho chữ cái đầu tiên, hoặc dòng đầu tiên của phần tử.

– Chèn nội dung trước hoặc sau nội dung của phần tử, chính là before và after các bạn đã được học trong bài trước đó.

Cú pháp

Cú pháp của một Pseudo-Elements như sau:

Lưu ý: Phân biệt ký hiệu 2 dấu hai chấm ::pseudo-element so với 1 dấu hai chấm :pseudo-element

  • Hai dấu hai chấm đã thay thế ký hiệu một dấu hai chấm cho các pseudo-element trong CSS3. Đây là một nỗ lực từ W3C để phân biệt giữa pseudo-classes và pseudo-element.
  • Cú pháp một dấu hai chấm được sử dụng cho cả hai pseudo-classes và pseudo-element trong CSS2 và CSS1.
  • Đối với tính tương thích ngược, cú pháp một dấu hai chấm được chấp nhận cho các pseudo-element trong CSS2 và CSS1.

Các Pseudo-Elements phổ biến

::before pseudo-element

Cái này các bạn đã được học trước đó rồi, mình sẽ nhắc lại nhé.

Before dùng để thêm nội dung vào đằng trước thẻ HTML.

Ví dụ, cho đoạn HTML như sau:

CSS cho đoạn HTML trên sử dụng after:

Rõ ràng trong HTML mình chỉ có dòng “xin chào các bạn!” vậy mà khi chạy lên lại xuất hiện dòng “Thầy giáo quốc dân xin chào các bạn“. Lý do là trong thuộc tính before mình có bổ sung một thuộc tính CSS content:"Thầy giáo quốc dân " nên nó nối vào đằng trước.

::after pseudo-element

Tương tự như ::before::after cũng được sử dụng để thêm nội dung nhưng là vào phía sau phần tử được chọn.

Ví dụ, cho đoạn HTML như sau:

CSS cho đoạn HTML trên sử dụng after:

Rõ ràng trong HTML mình chỉ có dòng “Chào mừng bạn đến với” vậy mà khi chạy lên lại xuất hiện dòng “Chào mừng bạn đến với trang học lập trình Thầy giáo quốc dân“. Lý do là trong thuộc tính after mình có bổ sung một thuộc tính CSS content:" trang học lập trình Thầy giáo quốc dân" nên nó nối vào đằng sau.

::selection pseudo-element

Pseudo-element này được dùng để style cho một vùng văn bản được người dùng chọn (hay còn gọi là “bôi đen“). Chỉ có một số thuộc tính css khả dụng với ::selection là colorbackgroundcursor, và outline.

Ví dụ dưới đây mô tả khi người dùng bôi đen thì đoạn văn bản đó sẽ có màu đỏ và nền vàng.

::first-line pseudo-element

Pseudo-element ::first-line dùng để style cho dòng đầu tiên của phần tử được chọn.

Cùng xem ví dụ dưới đây:

Lưu ý: ::first-line chỉ có thể được áp dụng cho các phần tử html là block.

Các thuộc tính css sau áp dụng cho ::first-line pseudo-element:

  • font properties
  • color properties
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

::first-letter pseudo-element

::first-letter được sử dụng để thêm style đặc biệt vào chữ cái đầu tiên của văn bản.

Ví dụ sau định dạng chữ cái đầu tiên của văn bản trong tất cả các phần tử <p>:

Tương tự như ::first-line thì ::first-letter cũng chỉ có thể áp dụng được cho các phần tử html là block.

Các thuộc tính css sau áp dụng cho ::first-letter pseudo-element:

  • font properties
  • color properties
  • background properties
  • margin properties
  • padding properties
  • border properties
  • text-decoration
  • vertical-align (only if “float” is “none”)
  • text-transform
  • line-height
  • float
  • clear

Kết luận

Như vậy là mình đã giới thiệu xong về Pseudo-Element trong CSS. Hy vọng qua bài viết ngắn này sẽ giúp các bạn chưa hiểu có thể hiểu rõ hơn về các phương thức đặc biệt này trong CSS. Xin cảm ơn và hẹn gặp lại.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây