CSS Pseudo-elements

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    8 thg 11, 2022

  • Số lượt xem

    501 lượt xem


CSS Pseudo-elements được dùng để CSS cho một phần cụ thể của element.

Cú pháp

Cú pháp của pseudo-elements:

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

 

::first-line Pseudo-element

::first-line pseudo-element được sử dụng để thêm một kiểu đặc biệt vào dòng đầu tiên của văn bản.

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

p::first-line {    color: #ff0000;    font-variant: small-caps;  }

 

Lưu ý: ::first-line pseudo-element chỉ có thể được áp dụng cho các element block.

Các thuộc tính sau áp dụng ::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 pseudo-element được sử dụng để thêm một kiểu đặ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 element <p>:

p::first-letter {    color: #ff0000;    font-size: xx-large;  }

Lưu ý: ::first-letter pseudo-element chỉ có thể được áp dụng cho các element block.

Các thuộc tính sau áp dụng ::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

Pseudo-elements và HTML Classes

Pseudo-elements có thể kết hợp với HTML classes

p.intro::first-letter {    color: #ff0000;    font-size: 200%;  }

 

Multiple Pseudo-elements

Một số pseudo-elements cũng có thể được kết hợp.

Trong ví dụ sau, chữ cái đầu tiên của đoạn văn sẽ có màu đỏ, với kích thước fontsize large-xx. Phần còn lại của dòng đầu tiên sẽ có màu xanh lam và có fontsize small-caps. Phần còn lại của đoạn văn sẽ có kích thước và màu font chữ mặc định:

p::first-letter {    color: #ff0000;    font-size: xx-large;  }    p::first-line {    color: #0000ff;    font-variant: small-caps;  }

 

::before Pseudo-element

::before Pseudo-element có thể được sử dụng để chèn một số nội dung vào trước nội dung của một element.

Ví dụ sau đây chèn một hình ảnh trước nội dung của mỗi element <h1>:

h1::before {    content: url(smiley.gif);  }

 

::after Pseudo-element

::after Pseudo-element có thể được sử dụng để chèn một số nội dung vào sau nội dung của một element.

Ví dụ sau đây chèn một hình ảnh sau nội dung của mỗi element <h1>:

h1::after {    content: url(smiley.gif);  }

 

::marker Pseudo-element

::marker pseudo-element chọn các điểm đánh dấu của các mục danh sách.

Ví dụ sau tạo kiểu cho các điểm đánh dấu của các mục danh sách:

::marker {    color: red;    font-size: 23px;  }

 

::selection Pseudo-element

::selection pseudo-element khớp với phần của element được người dùng chọn.

Các thuộc tính CSS có thể được sử dụng cho ::selection: color, background, cursor, và outline.

Ví dụ sau làm cho văn bản đã chọn có màu đỏ trên nền vàng:

::selection {    color: red;    background: yellow;  }

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.