how to implement list bullets in CSS [closed]


Tags: css

Problem :

I have the following bullets for list items. How can I implement these bullets in CSS?

See image

enter image description here



Solution :

From this answer, I edited it so it's what you wanted

CSS

body {
   counter-reset: item;
 }
 ol {
   list-style: none;
 }
 li {
   counter-increment: item;
   margin-bottom: 5px;
 }
 li:before {
   margin-right: 10px;
   content: counter(item);
   border-radius: 100%;
   border:2px solid #29465F;
   color:#29465F;
   font-weight:700;
   width: 1.2em;
   text-align: center;
   display: inline-block;
 }

HTML

<ol>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>

Here's a fiddle


    CSS Howto..

    How to select div with id nested in another div with class in css

    How do I highlight only the innermost table row of a nested table?

    How to increase the height of footerrow in jqgrid

    How to create both-sided dotted line around a title? [duplicate]

    How can I use CSS to select the “a” tag in the following layout?

    How to use Bootstrap Glyphicons in Holder.js images

    how to make this slide menu work

    How to apply css on every 2nd child using nth-child() with jquery

    How to align image to top left of div

    How to have a color change animation on a button outline?

    How do I add CSS to part of another object?

    How do browsers read and interpret CSS?

    How to style using nth-of-type within a ul tag?

    how to align button radio in css

    Image div showing in Safari, Chrome and IE but not in Firefox

    How to mark up a layout blocks with the CSS property “display:flex;”?

    How to configure css flexbox so height of one of the block depends on it content?

    How to repeat a CSS shape horizontally?

    How to bottom align a title of variable length

    How to have anchors to the side of the page? [closed]

    How to remove the yellow row highlighting

    How to use a variable for a path with Stylus?

    How to hide a parent div if an inner div has a certain class, with javascript

    how to inherit classes in css

    How to hide the div on click through animation css

    How do you make an image or button glow when you mouse over using javascript or jquery?

    How can I create an addin in Visual Studio to generate javascript, CSS and other code from a settings file

    How to deal with image references in CSS in a Rails 3.1 app

    How to persist local CSS change to server record?

    How do I override css for a particular control? [closed]