Làm đẹp cho danh sách số thứ tự hoặc dấu đầu dòng

Như ta thường thấy việc đánh số thứ tự (number list) hoặc đánh dấu đầu dòng (bullet list) được sử dụng rất nhiều trong soạn thảo văn bản cũng như bài viết trên web. Mặc định đánh số hoặc đánh dấu đều sử dụng kiểu font bình thường. Nhưng nếu bạn muốn bài viết của mình trở nên đẹp mắt hơn với các định dạng riêng. Thì hôm nay mình sẽ chia sẻ cách để tạo một danh sách với định dạng đẹp mắt (gọi là style list). Chỉ cần sử dụng CSS và tất nhiên là hoàn toàn tự động.

Định dạng cho số thứ tự theo HTML là:

<ol>
<li>nội dung</li>
<li>nội dung</li>
...
</ol>

Định dạng cho đánh dấu đầu dòng theo HTML là:

<ul>
<li>nội dung</li>
<li>nội dung</li>
...
</ul>

Do đó ta sẽ chỉ cần viết lại CSS cho các element ol, ul và li.

1 Định dạng cho danh sách số thứ tự

Thường CSS của danh sách số cơ bản sẽ như thế này:

ol {
  list-style: decimal; /* Hiển thị danh sách số */
}

Trước tiên ta sẽ ẩn số mặc định này đi bằng cách thay bằng đoạn css

ol {
  list-style: none; /* Không hiển thị danh sách số */
}

Tiếp theo ta sẽ thêm phần CSS sau để hiển thị số đã được tút theo ý muốn:

ol li:before {content: counter(li);
  display: inline-block;
  margin-right: 8px;
  margin-left: -33px;
  text-align: center;
  width: 25px; height: 25px;
  font-size:18px;
  color: #fff;
  background: #0489B1;
  line-height: 25px;
  border-radius: 50%;
}
  
li {counter-increment: li; margin-bottom: 5px; margin-left:5px;}

Đây là code canxem.com đang xài cho bài viết. Các bạn có thể tùy chỉnh lại các phần màu sắc, độ lớn, hình dạng,…

2 Định dạng đánh dấu đầu dòng

Tương tự phần đánh dấu mặc định thường sẽ như này:

ul {
  list-style: disc; /* Hiển thị dấu tròn */
}

Ta sẽ bỏ dấu tròn đi bằng cách xóa đoạn trên và thay bằng đoạn sau:

ul {
  list-style: none; /* Không hiển thị dấu */
}

Tiếp theo ta sẽ thêm phần CSS sau để hiển thị nút đã được lựa chọn theo ý muốn:

ul li:before {
  content: "\2756";
  padding-right: 13px;
  color: #0489B1;
  margin-left:-33px;
}

Ở đây ta lưu ý phần content: “\2756”; Mã này là mã HTML của nút đầu dòng. Xem thêm Bảng tra cứu mã HTML ký tự đặc biệt để chọn icon mình thích.

Lưu ý nếu dùng wordpress, chúng ta sẽ sửa CSS trong file style.css của theme hoặc child theme đang sử dụng.

Dưới đây là ví dụ cho kết quả thu được sau khi thực hiện các bước như hướng dẫn.

Còn chờ gì nữa mà ko bắt tay làm ngay. Quá đơn giản để có một danh sách đẹp phải không. Mọi thắc mắc hãy để lại bình luận bên dưới.