html list without bullets

Hello coders! In this post I have shared the details about “html list without bullets”. Okay, let’s move on to the tutorial.

html list without bullets

ul 
  list-style-type: none;

/* if you want to remove indentation , set padding: 0 and margin: 0 */

/* if you want inline code*/
<ul style="list-style: none;">
    <li>...</li>
</ul>
list-style-type: none;
#my-list-element 
  list-style-type: none;
  padding-left: 0px;
ul 
  list-style-type: none;
  padding: 0;
  margin: 0;

style="list-style-type:none;"
/* Manually Add Bullets to Elements in HTML Page*/
ul
  position: relative;

ul li
  list-style: none;

ul li::after
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #f00;
  top: 2px;
  left: -8px;
  /* + or - top and left according to your style, so that they look perfect*/

Conclusion

I hope this tutorial helps you to know about “html list without bullets”. If you have any queries regarding this post please let us know via the comment section. Share this post with your friends and family via social networks.

Hi, I'm Ranjith a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coder Diksha. Here, I post about programming to help developers.

Share on:

Leave a Comment