Biểu tượng dấu đầu dòng tùy chỉnh cho các phần tử <li> trong <ul> là ký tự thông thường và không phải là hình ảnh

Tôi nhận ra rằng người ta có thể chỉ định một đồ họa tùy chỉnh là một ký tự dấu đầu dòng thay thế, sử dụng thuộc tính CSS:

list-style-image

Và sau đó cung cấp cho nó một URL.

Tuy nhiên, trong trường hợp của tôi, tôi chỉ muốn sử dụng biểu tượng '+'. Tôi không muốn phải tạo ra một đồ họa cho điều đó và sau đó chỉ vào nó. Tôi chỉ muốn hướng dẫn danh sách không có thứ tự sử dụng biểu tượng dấu cộng làm biểu tượng dấu đầu dòng.

Điều này có thể được thực hiện hay tôi buộc phải biến nó thành một đồ họa đầu tiên?

Sau đây được trích dẫn từ Danh sách thuần hóa :

Có thể đôi khi bạn có một danh sách, nhưng bạn không muốn có bất kỳ viên đạn nào, hoặc bạn muốn sử dụng một số ký tự khác thay cho viên đạn. Một lần nữa, CSS cung cấp một giải pháp đơn giản. Đơn giản chỉ cần thêm kiểu danh sách: none; theo quy tắc của bạn và buộc các LI hiển thị với các vết lõm treo. Quy tắc sẽ trông giống như thế này:

ul {
   list-style: none;
   margin-left: 0;
   padding-left: 1em;
   text-indent: -1em;
}

Hoặc phần đệm hoặc phần lề cần được đặt thành 0, với phần còn lại được đặt thành 1em. Tùy thuộc vào đạn Bullet mà bạn chọn, bạn có thể cần phải sửa đổi giá trị này. Văn bản thụt lề tiêu cực làm cho dòng đầu tiên được di chuyển sang bên trái bởi số tiền đó, tạo ra một thụt lề treo.

HTML sẽ chứa UL tiêu chuẩn của chúng tôi, nhưng với bất kỳ ký tự hoặc thực thể HTML nào bạn muốn sử dụng thay cho dấu đầu dòng trước nội dung của mục danh sách. Trong trường hợp của chúng tôi, chúng tôi sẽ sử dụng », trích dẫn góc kép bên phải:».

»Mục 1
» Mục 2
»Mục 3
» Mục 4
»Mục 5 chúng tôi sẽ thực hiện
   lâu hơn một chút để
   nó sẽ bao bọc

Đây là một câu trả lời muộn, nhưng tôi đã bắt gặp điều này ... Để có được sự thụt lề chính xác trên bất kỳ dòng nào, hãy thử theo cách này:

ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

li {
  padding-left: 1em;
  text-indent: -1em;
}

li:before {
  content: "+";
  padding-right: 5px;
}

Rất nhiều giải pháp.
Nhưng tôi vẫn nghĩ có chỗ để cải thiện.

Ưu điểm:

• mã rất nhỏ gọn
• hoạt động với mọi cỡ chữ
  (không chứa giá trị pixel tuyệt đối)
• sắp xếp các hàng một cách hoàn hảo
  (không có sự thay đổi nhỏ giữa dòng đầu tiên và dòng sau)

ul {
	position: relative;
	list-style: none;
	margin-left: 0;
	padding-left: 1.2em;
}
ul li:before {
	content: "+";
	position: absolute;
	left: 0;
}

<ul>
  <li>Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id orci porta dapibus.</li>
  <li>Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</li>
</ul>

Đây là giải pháp W3C. Hoạt động trong Firefox và Chrome.

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

http://dev.w3.org/csswg/css-lists/#marker-content

ul { list-style-type: "🔔 "; }

  <ul><li>item</li></ul>

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

ul {
    list-style: none;
    margin-left: 0;
    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à để ký tự trong một khối nổi có chiều rộng cố định để văn bản vẫn được căn chỉnh nếu 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, thay đổi nó theo nhu cầu của bạn.

Bạn có thể sử dụng :beforebộ chọn giả để chèn nội dung vào trước mục danh sách. Bạn có thể tìm thấy một ví dụ trên Quirksmode, tại http://www.quirksmode.org/css/beforeafter.html . Tôi sử dụng điều này để chèn các trích dẫn khổng lồ xung quanh blockquote ...

HTH.

Giải pháp của tôi sử dụng định vị để có được các dòng bọc tự động xếp hàng chính xác. Vì vậy, bạn không phải lo lắng về việc đặt phần đệm - ngay trên li: trước đó.

ul {
  margin-left: 0;
  padding-left: 0;
  list-style-type: none;
}

ul li {
  position: relative;
  margin-left: 1em;
}

ul li:before {
  position: absolute;
  left: -1em;
  content: "+";
}

<ul>
  <li>Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Bạn nên đủ điều kiện để tạo kiểu <li>cho nó để không ảnh hưởng đến <ol>các mục trong danh sách. Vì thế:

ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

ul li {
    padding-left: 1em;
    text-indent: -1em;
}

ul li:before {
    content: "+";
    padding-right: 5px;
}

Font-awesome cung cấp một giải pháp tuyệt vời:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />

<ul class='fa-ul'>
  <li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>
  <li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>
</ul>

Phong cách em dash:

ul.emdash {
  list-style-type: none;
  list-style-position: inside;
  text-indent: -1.25em;
}
ul.emdash > li:before {
  content: "\2014\00A0"; /* em dash + space*/
}

Tôi thích sử dụng lề âm, giúp bạn kiểm soát nhiều hơn

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

li:before {
  content: "*";
  display: inline;
  float: left;
  margin-left: -18px;
}

Thật thú vị, tôi không cho rằng bất kỳ giải pháp được đăng nào là đủ tốt, bởi vì chúng dựa vào thực tế là nhân vật được sử dụng rộng 1em, không cần phải như vậy (ngoại trừ câu trả lời của John Magnolia có thể sử dụng phao có thể làm phức tạp mọi thứ theo cách khác). Đây là nỗ lực của tôi:

ul {
  list-style-type: none;
  margin-left: 0;
  padding-left: 30px; /* change 30px to anything */
  text-indent: -30px;
}
ul li:before {
  content: "xy";
  display: inline-block; 
  width: 30px;
  text-indent: 0;
  text-align: center; /* change this for different bullet position */
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Điều này có những lợi thế này (hơn các giải pháp khác):

1. Nó không dựa vào chiều rộng của biểu tượng như bạn thấy trong ví dụ. Tôi đã sử dụng hai ký tự để cho thấy rằng nó hoạt động ngay cả với những viên đạn rộng. Nếu bạn thử điều này trong các giải pháp khác, bạn sẽ nhận được văn bản bị căn chỉnh (thực tế nó thậm chí còn hiển thị với biểu tượng * ở mức phóng to cao hơn).
2. Nó cho phép bạn kiểm soát hoàn toàn không gian được sử dụng bởi đạn . Bạn có thể thay thế 30px bằng bất cứ thứ gì (thậm chí 1em, v.v.). Chỉ cần đừng quên thay đổi nó trên cả ba nơi.
3. Nếu cho bạn toàn quyền kiểm soát vị trí của viên đạn . Chỉ cần thay thế text-align: center;bởi bất cứ điều gì theo ý thích của bạn. Ví dụ: bạn có thể thử color: red; text-align: right; padding-right: 5px; box-sizing: border-box; hoặc nếu bạn không thích chơi với hộp viền, chỉ cần trừ phần đệm (5px) khỏi chiều rộng (ví dụ: width: 25px trong ví dụ này). Có rất nhiều lựa chọn.
4. Nó không sử dụng phao để nó có thể được chứa ở bất cứ đâu.

Thưởng thức.

thử cái này

    ul.a {
        list-style-type: circle;
    }
    
    ul.b {
        list-style-type: square;
    }
    
    ol.c {
        list-style-type: upper-roman;
    }
    
    ol.d {
        list-style-type: lower-alpha;
    }
    

<!DOCTYPE html>
    <html>
    <head>
    
    </head>
    <body>
    
    <p>Example of unordered lists:</p>
    <ul class="a">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    
    <ul class="b">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    
    <p>Example of ordered lists:</p>
    <ol class="c">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    
    <ol class="d">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    
    </body>
    </html>