36. Counter Trong CSS

Counter trong CSS, counter là một công cụ mạnh giúp bạn tạo các số thứ tự hoặc số đếm tùy chỉnh cho các phần tử trên trang web. Các counter thường được sử dụng để đánh số các mục trong danh sách, bài viết, chương trong sách, và nhiều ngữ cảnh khác.

Dưới đây là một ví dụ về cách sử dụng counter trong CSS:

HTML:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Counter Example</title>
</head>
<body>
  <h2>Numbered List</h2>
  <ol class="numbered-list">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ol>
  
  <h2>Custom Counter</h2>
  <ul class="custom-list">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</body>
</html>

CSS (styles.css):

css

/* Định dạng số thứ tự trong danh sách */
.numbered-list {
  counter-reset: item-counter; /* Đặt giá trị đếm ban đầu */
  list-style-type: none; /* Ẩn kiểu đánh số mặc định */
  padding-left: 0; /* Loại bỏ lề trái */
}

.numbered-list li {
  counter-increment: item-counter; /* Tăng giá trị đếm cho mỗi phần tử */
  margin-bottom: 10px;
}

.numbered-list li::before {
  content: counter(item-counter) ". "; /* Sử dụng giá trị đếm và thêm dấu chấm sau số */
}

/* Định dạng số đếm tùy chỉnh trong danh sách */
.custom-list {
  list-style-type: none; /* Ẩn kiểu đánh số mặc định */
  padding-left: 0; /* Loại bỏ lề trái */
}

.custom-list li {
  position: relative;
  margin-bottom: 10px;
}

.custom-list li::before {
  content: "• "; /* Sử dụng dấu chấm làm số đếm */
  position: absolute;
  left: -15px; /* Đặt khoảng cách từ biểu tượng đến nội dung */
}

Trong ví dụ này:

.numbered-list định dạng danh sách số thứ tự bằng cách sử dụng counter.
.custom-list định dạng danh sách tùy chỉnh bằng cách sử dụng biểu tượng.

Counter cho phép bạn tạo các phần tử liệt kê số thứ tự hoặc tùy chỉnh một cách dễ dàng bằng CSS.

Leave a Comment Cancel Reply