ฉันจำเป็นต้องใช้ตัวอย่างเช่นสัญลักษณ์รูปดาว (★) เป็นสัญลักษณ์แสดงหัวข้อย่อยสำหรับรายการ

ฉันได้อ่านโมดูล CSS3: รายการที่อธิบายวิธีใช้ข้อความที่กำหนดเองเป็นสัญลักษณ์แสดงหัวข้อย่อย แต่ไม่ได้ผลสำหรับฉัน ฉันคิดว่าเบราว์เซอร์ไม่รองรับ::markerองค์ประกอบหลอก

ฉันจะทำได้อย่างไรโดยไม่ต้องใช้ภาพ

แก้ไข

ฉันคงไม่แนะนำให้ใช้รูปภาพอีกต่อไป ฉันยึดติดกับวิธีการใช้อักขระ Unicode เช่นนี้:

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

คำตอบเก่า ๆ

ฉันอาจจะเลือกใช้พื้นหลังภาพมันมีประสิทธิภาพมากกว่ามากหลากหลายและใช้งานข้ามเบราว์เซอร์ได้ดีกว่า

นี่คือตัวอย่าง:

<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>

การใช้ข้อความเป็นสัญลักษณ์แสดงหัวข้อย่อย

ใช้li:beforeกับเอนทิตี Hex HTML ที่ใช้Escape (หรือข้อความธรรมดา)

ตัวอย่าง

ตัวอย่างของฉันจะสร้างรายการที่มีเครื่องหมายถูกเป็นสัญลักษณ์แสดงหัวข้อย่อย

CSS :

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

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

ความเข้ากันได้ของเบราว์เซอร์

ยังไม่ได้ทดสอบตัวเอง แต่ควรได้รับการสนับสนุนตั้งแต่ IE8 อย่างน้อยนั่นคือสิ่งที่quirksmode & css-tricksพูด

คุณสามารถใช้ข้อคิดเห็นแบบมีเงื่อนไขเพื่อใช้โซลูชันที่เก่ากว่า / ช้ากว่าเช่นรูปภาพหรือสคริปต์ ยังดีกว่าใช้ทั้งสองอย่างกับ<noscript>ภาพ

HTML :

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

เกี่ยวกับภาพพื้นหลัง

ภาพพื้นหลังเป็นเรื่องง่ายที่จะจัดการ แต่ ...

1. รองรับเบราว์เซอร์สำหรับ background-size IE9 เท่านั้น
2. สีข้อความ HTML และพิเศษ ( บ้าแบบอักษร ) สามารถทำได้มากโดยมีคำขอ HTTP น้อยลง
3. โซลูชันสคริปต์สามารถฉีดเอนทิตี HTML และปล่อยให้ CSS เดียวกันทำงานได้
4. การรีเซ็ตโค้ด CSS ที่ดีอาจทำให้list-style(ตัวเลือกเชิงตรรกะมากขึ้น) ง่ายขึ้น

สนุก.

คุณสามารถสร้างได้:

#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;
}

อัปเดต: ในความคิดเห็น Goerge ระบุว่า "ใช้งานได้บน Chrome, Firefox และ Edge แต่ไม่ใช่ Safari"

นี่คือโซลูชัน W3C คุณสามารถใช้ได้ใน 3012!

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

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

ไม่แนะนำให้ใช้รูปภาพเนื่องจากอาจปรากฏเป็นพิกเซลในอุปกรณ์บางอย่าง (อุปกรณ์ Apple ที่มีจอแสดงผล Retina) หรือเมื่อซูมเข้าด้วยตัวอักษรรายการของคุณจะดูน่าประทับใจทุกครั้ง

นี่คือทางออกที่ดีที่สุดที่ฉันเคยพบมา ใช้งานได้ดีและเป็นข้ามเบราว์เซอร์ (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;
}

สิ่งสำคัญคือต้องให้อักขระอยู่ในบล็อกลอยที่มีความกว้างคงที่เพื่อให้ข้อความยังคงจัดแนวหากยาวเกินไปที่จะพอดีกับบรรทัดเดียว 1.2emคือความกว้างที่คุณต้องการสำหรับตัวละครของคุณเปลี่ยนตามความต้องการของคุณ อย่าลืมรีเซ็ตช่องว่างภายในและระยะขอบสำหรับองค์ประกอบ ul และ li

แก้ไข: โปรดทราบว่าขนาด "1.2em" อาจแตกต่างกันไปหากคุณใช้แบบอักษรอื่นใน ul และ li: before การใช้พิกเซลจะปลอดภัยกว่า

ในการเพิ่มดาวให้ใช้อักขระ Unicode 22C6ในการเพิ่มการใช้ดาราอักขระ

ฉันเพิ่มช่องว่างเพื่อให้มีช่องว่างเล็กน้อยระหว่างliดาวกับดาว A0สำหรับพื้นที่ที่ได้คือ

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

ตัวอย่างที่สมบูรณ์ยิ่งขึ้นของคำตอบของ 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;
}

ฉันได้รวมคุณสมบัติ star-hack เพื่อคืนค่ารูปแบบรายการเริ่มต้นใน IE เวอร์ชันเก่า คุณสามารถดึงสิ่งเหล่านี้ออกมาและรวมไว้ในเงื่อนไข include หากต้องการหรือแทนที่ด้วยโซลูชันที่ใช้ภาพพื้นหลัง ความเห็นที่ต่ำต้อยของฉันคือรูปแบบสัญลักษณ์แสดงหัวข้อย่อยพิเศษที่นำมาใช้ในลักษณะนี้ควรลดระดับลงอย่างสง่างามในเบราว์เซอร์บางตัวที่ไม่รองรับตัวเลือกหลอก

ทดสอบใน Firefox, Chrome, Safari และ IE8-10 และแสดงผลได้อย่างถูกต้อง

ul {
    list-style-type: none;    
}

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

ฉันเคยดูรายการทั้งหมดนี้และมีองค์ประกอบที่ถูกต้องและไม่ถูกต้องบางส่วนตลอดจนถึงปี 2020

ฉันพบว่าการเยื้องและการชดเชยเป็นปัญหาที่ใหญ่ที่สุดเมื่อใช้ UTF-8 ดังนั้นฉันจึงโพสต์สิ่งนี้เป็นโซลูชัน CSS ที่เข้ากันได้กับปี 2020 โดยใช้สัญลักษณ์แสดงหัวข้อย่อย "สามเหลี่ยมตั้งตรง" เป็นตัวอย่างของฉัน

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
}

ใช้emเป็นหน่วยเพื่อหลีกเลี่ยงความขัดแย้งกับการปรับขนาดแบบอักษร

ลองใช้รหัสนี้ ...

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

หัวข้อนี้อาจเก่า แต่นี่คือวิธีแก้ไขอย่างรวดเร็ว ul {list-style:outside none square;}หรือ ul {list-style:outside none disc;}ฯลฯ ...

จากนั้นเพิ่มช่องว่างด้านซ้ายในรายการองค์ประกอบ

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