能否制作像这样的自定义符号？

Question

如果您能仅使用CSS完成此任务，则会更好。 提前感谢您的帮助。

- Milan Agheda

---

如果它们针对每个列表项都增加，您不需要自定义符号，而是需要自定义数字。每个项目递增意味着它是一个“有序列表” ol 而不是一个“无序列表” ul。因此，请尝试搜索自定义数字而不是自定义符号。 - Anthony

在创建 ul li 时，添加一个循环以根据递增的 li 数量创建 *。 - Alive to die - Anant

抱歉，但是没有得到任何解决方案... - Milan Agheda

寻找“计数器”。 - vals

Answer 1

如果您想通过纯 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>

- Pedram

Answer 2

这是你所需要的唯一CSS解决方案：

你可以使用list-style:@counter-style实现这个效果，并根据你的需要进行自定义。

但是当前的@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>

希望这对您有帮助。如果您能使用脚本，那将是最好的选择，尽管在接下来的几年里，支持还不够完善，但现在已经是一种可行的方法。

- Jithin Raj P R

Answer 3

有一种方法可以做到，但是你必须手动逐行操作，前提是你只使用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>

- Anh Pham

---

我认为它限制了固定的项目数量 :) - Milan Agheda

Answer 4

请查看https://codepen.io/mgkrish/pen/EEVpON以获取动态 li 样式。

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

        }

      });

- Gokulakrishnan M