CODEWITHSUNDEEP
jqueryhtmlcss
Milan Agheda
Milan Agheda

Reputation: 353

Is it possible to make custom bullets like this?

enter image description here

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

Upvotes: 3

Views: 143

Answers (4)

Jithin Raj P R
Jithin Raj P R

Reputation: 6797

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

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

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>

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.

Upvotes: 2

Gokulakrishnan M
Gokulakrishnan M

Reputation: 360

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

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

        }

      });

Upvotes: 1

Pedram
Pedram

Reputation: 16595

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. 

$('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>

Upvotes: 2

Anh Pham
Anh Pham

Reputation: 695

There is one way to do it but you have to do manually line by line given that you are using only 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>

Upvotes: 1

Related Questions