Ví dụ, tôi cần sử dụng biểu tượng dấu sao (★) làm gạch đầu dòng cho một mục danh sách.

Tôi đã đọc mô-đun CSS3: Danh sách , mô tả, cách sử dụng văn bản tùy chỉnh làm dấu đầu dòng, nhưng nó không hoạt động với tôi. Tôi nghĩ, các trình duyệt chỉ đơn giản là không hỗ trợ ::markerphần tử giả.

Làm thế nào tôi có thể làm điều đó, mà không cần sử dụng hình ảnh?

BIÊN TẬP

Tôi có lẽ sẽ không khuyên bạn nên sử dụng hình ảnh nữa. Tôi muốn sử dụng một ký tự Unicode, như sau:

li:before {
  content: "\2605";
}

CÂU TRẢ LỜI CŨ

Tôi có lẽ sẽ chọn một nền hình ảnh, chúng linh hoạt và thân thiện với nhiều trình duyệt hiệu quả hơn nhiều .

Đây là một ví dụ:

<style type="text/css">
  ul {list-style:none;} /* you should use a css reset too... ;) */
  ul li {background:url(images/icon_star.gif) no-repeat 0 5px;}
</style>

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>

Sử dụng văn bản dưới dạng dấu đầu dòng

Sử dụng li:beforevới Thực thể HTML Hex đã thoát (hoặc bất kỳ văn bản thuần túy nào).

Thí dụ

Ví dụ của tôi sẽ tạo ra các danh sách có dấu kiểm là dấu đầu dòng.

CSS :

ul {
    list-style: none;
    padding: 0px;
}

ul li:before
{
    content: '\2713';
    margin: 0 1em;    /* any design */
}

tính tương thích của trình duyệt web

Tôi chưa thử nghiệm bản thân mình, nhưng nó sẽ được hỗ trợ từ IE8. Ít nhất đó là những gì quirksmode & css-trick nói.

Bạn có thể sử dụng nhận xét có điều kiện để áp dụng các giải pháp cũ hơn / chậm hơn như hình ảnh hoặc tập lệnh. Tốt hơn, sử dụng cả hai với <noscript>cho hình ảnh.

HTML :

<!--[if lt IE 8]>
    *SCRIPT SOLUTION*
    <noscript>
        *IMAGE SOLUTION*
    </noscript>
<![endif]-->

Giới thiệu về hình nền

Hình nền thực sự dễ xử lý, nhưng ...

1. Hỗ trợ trình duyệt cho background-size IE9.
2. Màu văn bản HTML và đặc biệt ( điên rồ phông chữ ) có thể làm được nhiều việc, với ít yêu cầu HTTP hơn.
3. Một giải pháp tập lệnh chỉ có thể đưa Thực thể HTML vào và để cho cùng một CSS thực hiện công việc.
4. Việc đặt lại mã CSS tốt có thể giúp list-style(lựa chọn hợp lý hơn) dễ dàng hơn.

Thưởng thức.

Bạn có thể xây dựng nó:

#modal-select-your-position li {
/* handle multiline */
    overflow: visible;
    padding-left: 17px;
    position: relative;
}

#modal-select-your-position li:before {
/* your own marker in content */
   content: "—";
   left: 0;
   position: absolute;
}

Đây là giải pháp W3C. Bạn có thể sử dụng nó vào năm 3012!

ul { list-style-type: "*"; }
/* Sets the marker to a "star" character */

https://drafts.csswg.org/css-lists/#text-markers

Hình ảnh không được khuyến nghị vì chúng có thể xuất hiện theo pixel trên một số thiết bị (thiết bị Apple có màn hình Retina) hoặc khi được phóng to. Với một ký tự, danh sách của bạn trông luôn tuyệt vời.

Đây là giải pháp tốt nhất mà tôi đã tìm thấy cho đến nay. Nó hoạt động tuyệt vời và là trình duyệt chéo (IE 8+).

ul {
    list-style: none;
    padding-left: 1.2em;
    text-indent: -1.2em;
}

li:before {
    content: "►";
    display: block;
    float: left;
    width: 1.2em;
    color: #ff0000;
}

Điều quan trọng là phải có ký tự trong một khối nổi với chiều rộng cố định để văn bản vẫn được căn chỉnh nếu nó quá dài để vừa trên một dòng. 1.2em là chiều rộng bạn muốn cho nhân vật của mình, hãy thay đổi nó theo nhu cầu của bạn. Đừng quên đặt lại đệm và lề cho các phần tử ul và li.

CHỈNH SỬA: Lưu ý rằng kích thước "1,2em" có thể thay đổi nếu bạn sử dụng phông chữ khác trong ul và li: trước đây. Sẽ an toàn hơn khi sử dụng pixel.

Để thêm dấu sao, hãy sử dụng ký tự Unicode 22C6.

Tôi đã thêm một khoảng trống để tạo ra một khoảng cách nhỏ giữa lidấu sao và dấu sao. Mã cho khoảng trắng là A0.

li:before {
    content: '\22C6\A0';
}

Một ví dụ đầy đủ hơn về câu trả lời của 222 :

ul {
    list-style:none;
    padding: 0 0 0 2em;     /* padding includes space for character and its margin */

    /* IE7 and lower use default */
    *list-style: disc;
    *padding: 0 0 0 1em;
}
ul li:before {
    content: '\25BA';
    font-family: "Courier New", courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
    margin: 0 1em 0 -1em;   /* right margin defines spacing between bullet and text. negative left margin pushes back to the edge of the parent <ul> */

    /* IE7 and lower use default */
    *content: none;
    *margin: 0;
}
ul li {
    text-indent: -1em;      /* negative text indent brings first line back inline with the others */

    /* IE7 and lower use default */
    *text-indent: 0;
}

Tôi đã bao gồm các thuộc tính star-hack để khôi phục các kiểu danh sách mặc định trong các phiên bản IE cũ hơn. Bạn có thể kéo chúng ra và đưa chúng vào một bao gồm có điều kiện nếu muốn hoặc thay thế bằng giải pháp dựa trên hình ảnh nền. Ý kiến ​​khiêm tốn của tôi là các kiểu dấu đầu dòng đặc biệt được triển khai theo cách này sẽ giảm hiệu quả trên một số trình duyệt không hỗ trợ các bộ chọn giả.

Đã thử nghiệm trên Firefox, Chrome, Safari và IE8-10 và hiển thị chính xác tất cả.

ul {
    list-style-type: none;    
}

ul li:before {
    content:'*'; /* Change this to unicode as needed*/
    width: 1em !important;
    margin-left: -1em;
    display: inline-block;
}

Tôi đã xem qua toàn bộ danh sách này và có một phần đúng và một phần sai cho đến năm 2020.

Tôi nhận thấy rằng thụt lề và bù trừ là vấn đề lớn nhất khi sử dụng UTF-8, vì vậy tôi đăng bài này dưới dạng giải pháp CSS tương thích năm 2020 bằng cách sử dụng dấu đầu dòng "hình tam giác thẳng" làm ví dụ.

ul {
    list-style: none;
    text-indent: -2em; // needs to be 1 + ( 2 x margin), and the result 'negative'
}

ul li:before {
    content: "\25B2";
    margin: 0 0.5em; // 0.5 x 2 = 1, + 1 offset to get the bullet back in the right spot
}

sử dụng emlàm đơn vị để tránh xung đột với định cỡ phông chữ

Hãy thử mã này ...

li:before {
    content: "→ "; /* caractère UTF-8 */
}

Chủ đề này có thể đã cũ, nhưng đây là một bản sửa lỗi nhanh chóng ul {list-style:outside none square;}hoặc ul {list-style:outside none disc;}, v.v.

sau đó thêm phần đệm bên trái vào phần tử danh sách

ul li{line-height: 1.4;padding-bottom: 6px;}