是否可以制作这样的自定义项目符号？

It would be better if you can do this using CSS only. Thank you in advance.

如果你只使用CSS可以做到这一点会更好。先谢谢你。

4 个解决方案

#1

If you want to do this via pure css you should set it manually (like prev answer) but if you want to add stars dynamically, you should use something like this, there is no way to do this via pure css dynamically I think.

如果你想通过纯css这样做你应该手动设置它(如普通答案),但如果你想动态添加星星,你应该使用这样的东西,我认为没有办法通过动态纯css这样做。

$('ul li').each(function() {
  var index = $(this).index() + 1;
  var star = $('<span/>')
  for (i = 0; i < index; i++) {
    star.append('*');
  }
  $(this).prepend(star);
});

var l = $('ul li:last-child span').width();
$('ul li span').css('width', l);

ul li {
  list-style: none;
}

ul li a {
  display: inline;
}

ul li span {
    padding-right: 5px;
    display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a>Some text</a></li>
  <li><a>Some text</a></li>
  <li><a>Some text</a></li>
  <li><a>Some text</a></li>
  <li><a>Some text</a></li>
  <li><a>Some text</a></li>
  <li><a>Some text</a></li>
  <li><a>Some text</a></li>
  <li><a>Some text</a></li>
  <li><a>Some text</a></li>
</ul>

#2

This is the only CSS solution available for the result you want:

这是唯一可用于您想要的结果的CSS解决方案:

You can achieve the result using list-style:@counter-style and customize it using its option as per your need.

您可以使用list-style实现结果:@ counter-style并根据您的需要使用其选项对其进行自定义。

But this @counter-style currently works only on Firefox 33+

但这种@ counter-style目前仅适用于Firefox 33+

@counter-style cs-symbolic {
  system: symbolic;
  symbols: '*';
  range: ;
  suffix: " ";
}

ul {
  list-style: cs-symbolic;
  padding-left: 30%;
  float: left;
}

<ul id="demo-list" class="demo-numeric">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

Hope this was helpful for you. If you can use script it would be best, in following years the support will come but for now, it's not a perfect way to go with.

希望这对你有所帮助。如果你可以使用脚本,那将是最好的,在接下来的几年里,支持将会到来但是现在,它不是一个完美的方式。

#3

There is one way to do it but you have to do manually line by line given that you are using only CSS.

有一种方法可以做到但是你必须逐行手动,因为你只使用CSS。

ul, li {
   list-style:none      
}

li:nth-child(1):before {
   content: "*" 
}

li:nth-child(2):before {
   content: "**" 
}

<ul>
  <li> foo</li>
  <li> bar</li>
</ul>

#4

Please check the https://codepen.io/mgkrish/pen/EEVpON for dynamic li styles

有关动态li样式,请查看https://codepen.io/mgkrish/pen/EEVpON

<script
      src="https://code.jquery.com/jquery-3.3.1.min.js" ></script>
    <ol style="text-align: left;">
    <li>list 1</li>
    <li>list 2</li>
    <li>list 3</li>
    <li>list 4</li>
    <li>list 5</li>
    </ol>

    ol.HideStyle{
       list-style : none;
    }

    $(document).ready(function() {
        $("ol").addClass("HideStyle");

    var listLength= $( "li" ).length;
        for(i=0;i<=listLength;i++){
         var str= "*";
         var x=  str.repeat(i)
          $("ol li:nth-child(" + i + ")").prepend(x);
          console.log("X",x)

        }

      });

#1