Можно ли сделать такие пули на заказ?

Есть один способ сделать это, но вы должны делать это вручную построчно, учитывая, что вы используете только 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>

Если вы хотите сделать это через чистый 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>

Пожалуйста, проверьте 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.info("X",x)

        }

      });

Это единственное решение CSS, доступное для желаемого результата:

Вы можете добиться результата с помощью list-style:@counter-style и настроить его, используя его опцию в соответствии с вашими потребностями.

But this @counter-style currently works only on 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>

Надеюсь, это было полезно для вас. Если вы можете использовать скрипт, было бы лучше, в последующие годы поддержка придет, но пока это не лучший способ.