Pseudo-element ::marker của CSS

Định nghĩa và cách sử dụng

CSS ::marker Pseudo-element được sử dụng để thiết lập phong cách cho dấu hiệu của mục danh sách.

Pseudo-element này áp dụng cho bất kỳ element nào được thiết lập thành display: list-item.

Lưu ý:Các thuộc tính sau có thể được sử dụng cùng với ::marker Sử dụng cùng nhau:

• Tất cả các thuộc tính font
• Tất cả các thuộc tính hoạt hình
• Tất cả các thuộc tính chuyển đổi
• màu sắc
• white-space
• content
• text-combine-upright
• unicode-bidi
• direction

Mô hình

Ví dụ 1

Thiết lập màu sắc và cỡ chữ cho tất cả các dấu hiệu của mục danh sách:

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

Thử ngay

Ví dụ 2

Thiết lập nội dung, màu sắc và cỡ chữ cho dấu hiệu của mục danh sách của <ul> danh sách:

ul li::marker {
  content: "@ ";
  color: pink;
  font-size: 25px;
}

Thử ngay

Ví dụ 3

Đặt <h2> element thành display: list-item và thiết lập nội dung và màu sắc cho dấu hiệu của mục danh sách:

h2 {
  counter-increment: h2;
  display: list-item;
}
h2::marker {
  display: list-item;
  content: "@" counter(h2) " ";
  color: lightgreen;
}
body {
  counter-reset: h2;
  font-family: verdana;
  margin: 50px;
}

Thử ngay

Ngữ pháp CSS

::marker {
  các biểu thức css;
}

Chi tiết kỹ thuật

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ pseudo-element.

Trang liên quan

Hướng dẫn:Định nghĩa ảo CSS