Tìm hiểu về Pseudo-Elements trong CSS

Ở bài trước mình đã tìm hiểu về Pseudo-classes là gì, và mình cũng đã lấy ví dụ cho một số pseudo-class.

Trong bài học này mình tìm hiểu về Pseudo-Elements là gì? CSS hỗ trợ những pseudo-element nào. Mình cùng tìm hiểu trong bài học này nhé.

 1. Pseudo-Element là gì

 Pseudo-Element được sử dụng để định kiểu các phần được chỉ định của một phần tử.

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

Định dạng style cho chữ cái đầu tiên hoặc dòng đầu tiên của một phần tử. 

Chèn nội dung trước hoặc sau nội dung của một phần tử.

Cú pháp
selector::pseudo-element {
property:value;
}

Lưu ý ký hiệu hai dấu hai chấm - ::first-line so với :first-line

Dấu hai chấm kép đã thay thế ký hiệu dấu hai chấm đơn 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 dấu hai chấm đơn được sử dụng cho cả hai pseudo-classes và pseudo-element trong CSS2 và CSS1.

Để tương thích ngược, cú pháp dấu hai chấm đơn được chấp nhận cho các pseudo-element trong CSS2 và CSS1.

2. Một số pseudo-element

Trong CSS có tất cả các pseudo-element sau ::first-line, ::first-letter, ::before, ::after, ::selection

::first-line

 ::first-line được sử dụng để thêm style CSS cho dòng đầu tiên của nội dung.

Ở ví dụ này, mình sẽ thiết lập màu chữ (color) là màu đỏ cho dòng đầu tiên của phần tử p

Ví dụ RUN
p::first-line {color: red;};
span::first-line {color: red;}

Và kết quả của ví dụ trên:

Từ kết quả trên ta có một số điểm lưu ý sau:

::first-line chỉ áp dụng cho phần tử block như div, p, h1-h6 ...

Các thuộc tính sau được áp dụng cho ::first-line:

  • các thuộc tính font
  • các thuộc tính color
  • các thuộc tính background
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

::first-letter

::first-letter được sử dụng để thêm style CSS cho ký tự đầu tiên của nội dung.

Ở ví dụ này, mình sẽ thiết lập màu chữ (color) là màu đỏ cho ký tự đầu tiên của phần tử p

Ví dụ RUN
p::first-letter {color: red; }
span::first-letter {color: red;}

Và kết quả của ví dụ trên:

Từ kết quả trên ta có một số điểm lưu ý sau:

::first-letter chỉ áp dụng cho phần tử block như div, p, h1-h6 ...

Các thuộc tính sau được áp dụng cho ::first-letter:

  • Các thuộc tính font
  • Các thuộc tính color 
  • Các thuộc tính background 
  • Các thuộc tính margin 
  • Các thuộc tính padding 
  • Các thuộc tính border 
  • text-decoration
  • vertical-align (chỉ khi "float" là "none")
  • text-transform
  • line-height
  • float
  • clear

::before

::before được sử dụng để chèn một số nội dung trước nội dung của phần tử.

Ở ví dụ này, mình sẽ chèn hình mặt cười ở phía trước nội dung của phần tử h1

Ví dụ RUN
h1::before {
   content: url(https://freetuts.net/upload/tut_post/images/2019/01/20/1637/css-pseudo-element-img.GIF);
}

Và kết quả của ví dụ trên:

::after

::after dùng để chèn một số nội dung sau nội dung của phần tử.

Ở ví dụ này, mình sẽ chèn hình mặt cười sau nội dung của phần tử h1.

Ví dụ RUN
h1::after {
   content: url(https://freetuts.net/upload/tut_post/images/2019/01/20/1637/css-pseudo-element-img.GIF);
}

Và kết quả của ví dụ trên:

::selection

::selection dùng để thiết lập style CSS cho nội dung phần tử được chọn bởi người dùng (bằng thao tác như double-click vào nội dung hay giữ chuột trái để chọn nội dung).

Ở ví dụ này, mình sẽ thiết lập màu nền (background) là màu vàng và màu chữ (color) là màu đỏ nội dung được chọn của phần tử p, div, span.

Ví dụ RUN
::-moz-selection {
   color: red;
   background: yellow;
}
::selection {
   color: red;
   background: yellow;
}

Lưu ý:

::selection không được hỗ trợ cho trình duyệt Internet Explorer 8 và phiên bản trước đó.

Firefox hỗ trợ pseudo-element thay thế đó là ::-moz-selection

Một số thuộc tính CSS sau có thể áp dụng cho ::selection như colorbackgroundcursor, và outline.

3. Lời kết

Như vậy là mình đã trình bày xong pseudo-element trong CSS là gì và cũng đã lấy vị dụ cho các pseudo-element như ::before, ::after, ::selection, ::first-line, ::first-letter.

Trong quá trình viết không tránh khỏi sai sót, nếu có điều gì không hợp lý rất mong nhận được sự góp ý chân thành của các bạn để bài viết của mình ngày một tốt hơn.

Cám ơn các bạn đã đọc. Chúc các bạn vận dụng tốt.

Tham khảo: w3shool.com

Khóa học nên xem

Nguồn: freetuts.net