Custom bullet symbol for
  • elements in
      tha
  • 2020-01-24 10:18发布

    I realize one can specify a custom graphic to be a replacement bullet character, using CSS attribute:

    list-style-image
    

    And then giving it a URL.

    However, in my case, I just want to use the '+' symbol. I don't want to have to create a graphic for that and then point to it. I'd rather just instruct the unordered list to use a plus symbol as the bullet symbol.

    Can this be done or am I forced to make it a graphic first?

    15条回答
    别忘想泡老子
    2楼-- · 2020-01-24 10:55

    This is a late answer, but I just came across this... To get the indenting correct on any lines that wrap, try it this way:

    ul {
      list-style: none;
      margin-left: 0;
      padding-left: 0;
    }
    
    li {
      padding-left: 1em;
      text-indent: -1em;
    }
    
    li:before {
      content: "+";
      padding-right: 5px;
    }
    
    查看更多
    姐就是有狂的资本
    3楼-- · 2020-01-24 10:55

    My solution uses positioning to get wrapped lines automatically line up correctly. So you don't have to worry about setting padding-right on the 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>

    查看更多
    看我几分像从前
    4楼-- · 2020-01-24 11:00

    .list-dash li, .list-bullet li {
        position: relative;
        list-style-type: none; /* disc circle(hollow) square none */
        text-indent: -2em;
    }
    .list-dash li:before {
        content: '—  '; /* em dash */
    }
    .list-bullet li:before {
        content: '• '; /*copy and paste a bullet from HTML in browser into CSS (not using ASCII codes) */
    }
    <ul class="list-dash">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>

    查看更多
    Evening l夕情丶
    5楼-- · 2020-01-24 11:01

    So many solutions.
    But I still think there is room for improvement.

    Advantages:

    • very compact code
    • works with any font size
      (no absolute pixel values contained)
    • aligns rows perfectly
      (no slight shift between first line and following lines)

    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>

    查看更多
    叛逆
    6楼-- · 2020-01-24 11:06

    I prefer to use negative margin, gives you more control

    ul {
      margin-left: 0;
      padding-left: 20px;
      list-style: none;
    }
    
    li:before {
      content: "*";
      display: inline;
      float: left;
      margin-left: -18px;
    }
    
    查看更多
    家丑人穷心不美
    7楼-- · 2020-01-24 11:08

    It's advisable to qualify the styling of the <li> so it does not affect <ol> list items. So:

    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;
    }
    
    查看更多
    登录 后发表回答