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

ฉันตระหนักดีว่าสามารถระบุกราฟิกที่กำหนดเองให้เป็นอักขระสัญลักษณ์แสดงหัวข้อย่อยแทนโดยใช้แอตทริบิวต์ CSS:

list-style-image

จากนั้นให้ URL

อย่างไรก็ตามในกรณีของฉันฉันแค่ต้องการใช้สัญลักษณ์ '+' ฉันไม่ต้องการสร้างภาพกราฟิกสำหรับสิ่งนั้นแล้วชี้ไปที่มัน ฉันแค่สั่งให้รายการที่ไม่เรียงลำดับใช้สัญลักษณ์บวกเป็นสัญลักษณ์แสดงหัวข้อย่อย

สามารถทำได้หรือฉันถูกบังคับให้ทำกราฟิกก่อน?

สิ่งต่อไปนี้ยกมาจากTaming Lists :

อาจมีบางครั้งที่คุณมีรายการ แต่คุณไม่ต้องการสัญลักษณ์แสดงหัวข้อย่อยใด ๆ หรือคุณต้องการใช้อักขระอื่นแทนสัญลักษณ์แสดงหัวข้อย่อย อีกครั้ง CSS ให้วิธีแก้ปัญหาที่ตรงไปตรงมา เพียงแค่เพิ่มสไตล์รายการ: ไม่มี; ตามกฎของคุณและบังคับให้ LI แสดงด้วยการเยื้องแขวน กฎจะมีลักษณะดังนี้:

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

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

HTML จะมี UL มาตรฐานของเรา แต่จะมีอักขระหรือเอนทิตี HTML ใดก็ตามที่คุณต้องการใช้แทนสัญลักษณ์แสดงหัวข้อย่อยที่นำหน้าเนื้อหาของรายการ ในกรณีของเราเราจะใช้»เครื่องหมายคำพูดมุมฉากคู่ด้านขวา: »

»รายการที่ 1
»รายการที่ 2
»รายการที่ 3
»รายการที่ 4
»รายการที่ 5 เราจะทำให้
   นานขึ้นอีกเล็กน้อยเพื่อที่
   จะห่อ

นี่เป็นคำตอบที่ล่าช้า แต่ฉันเพิ่งเจอสิ่งนี้ ... เพื่อให้การเยื้องถูกต้องในบรรทัดใด ๆ ที่ห่อหุ้มให้ลองวิธีนี้:

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

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

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

วิธีแก้ปัญหามากมาย
แต่ฉันยังคิดว่ายังมีช่องว่างสำหรับการปรับปรุง

ข้อดี:

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

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>

นี่คือโซลูชัน W3C ทำงานใน Firefox และ 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>

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

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

คุณสามารถใช้:beforeตัวเลือกหลอกเพื่อแทรกเนื้อหาด้านหน้ารายการ คุณสามารถดูตัวอย่างใน Quirksmode ได้ที่http://www.quirksmode.org/css/beforeafter.html http://www.quirksmode.org/css/beforeafter.htmlฉันใช้สิ่งนี้เพื่อแทรกคำพูดขนาดใหญ่รอบ ๆ blockquotes ...

HTH

วิธีแก้ปัญหาของฉันใช้การวางตำแหน่งเพื่อให้เส้นที่พันกันเรียงกันอย่างถูกต้องโดยอัตโนมัติ ดังนั้นคุณไม่ต้องกังวลเกี่ยวกับการตั้งค่า padding-right บน li: before

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>

Font-awesome นำเสนอวิธีแก้ปัญหาที่ยอดเยี่ยมนอกกรอบ:

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

ขอแนะนำให้มีคุณสมบัติในการจัดรูปแบบ<li>เพื่อไม่ให้ส่งผลกระทบต่อ<ol>รายการ ดังนั้น:

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

สไตล์ 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*/
}

ฉันชอบใช้ระยะขอบติดลบช่วยให้คุณควบคุมได้มากขึ้น

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

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

ที่น่าสนใจก็คือฉันไม่คิดว่าโซลูชันใด ๆ ที่โพสต์นั้นดีพอเพราะพวกเขาอาศัยข้อเท็จจริงที่ว่าอักขระที่ใช้นั้นกว้าง 1em ซึ่งไม่จำเป็นต้องเป็นเช่นนั้น (อาจจะยกเว้นคำตอบของ John Magnolia ซึ่งใช้การลอยตัวซึ่งสามารถ ทำให้ซับซ้อนขึ้นอีกทางหนึ่ง) นี่คือความพยายามของฉัน:

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>

สิ่งนี้มีข้อดีเหล่านี้ (เหนือโซลูชันอื่น ๆ ):

1. ไม่ได้ขึ้นอยู่กับความกว้างของสัญลักษณ์ดังที่คุณเห็นในตัวอย่าง ฉันใช้อักขระสองตัวเพื่อแสดงให้เห็นว่ามันใช้งานได้แม้จะมีสัญลักษณ์แสดงหัวข้อย่อยกว้าง หากคุณลองใช้วิธีนี้ในโซลูชันอื่นคุณจะได้รับข้อความไม่ตรงแนว (อันที่จริงมันสามารถมองเห็นได้ด้วยสัญลักษณ์ * ในการซูมที่สูงขึ้น)
2. มันจะช่วยให้คุณรวมการควบคุมของพื้นที่ที่ใช้ด้วยกระสุน คุณสามารถแทนที่ 30px ด้วยอะไรก็ได้ (แม้แต่ 1em เป็นต้น) อย่าลืมเปลี่ยนทั้งสามที่
3. ถ้าช่วยให้คุณสามารถควบคุมตำแหน่งของสัญลักษณ์แสดงหัวข้อย่อยได้ทั้งหมด เพียงแค่แทนที่text-align: center;ด้วยสิ่งที่คุณต้องการ ตัวอย่างเช่นคุณอาจลอง color: red; text-align: right; padding-right: 5px; box-sizing: border-box; หรือถ้าคุณไม่ชอบเล่นกับ border-box ให้ลบ padding (5px) ออกจาก width (เช่น width: 25px ในตัวอย่างนี้) มีตัวเลือกมากมาย
4. ไม่ใช้ลอยจึงสามารถบรรจุได้ทุกที่

สนุก.

ลองดู

    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>