Equal space after li of unordered list

I've removed dot(.) after the <li> of <ol> and gave '|' after the number.

I've achieved it by using below code:

ol {
    counter-reset: item;
}
ol li::before {
    content: counter(item) " ";
    counter-increment: item;
    padding-right: 15px;
    border-right: 2.5px solid rgba(37, 194, 240, 0.8);
    margin-right: 15px;
}

But the space after the numbers are not equal.

I need uniform spacing after the numbers. Please help me to resolve this issue.

ol{counter-reset: item;columns: 2;}
ol li{display:block;margin-bottom:10px;}
ol li::before {
	content: counter(item) " ";
	counter-increment: item;
	padding-right: 15px;
	border-right: 2.5px solid rgba(37, 194, 240, 0.8);
	margin-right: 15px;
}
<ol>
<li>My abc</li>
<li>LiveColor</li>
<li>LiveFood</li>
<li>Ola</li>
<li>Uber</li>
<li>Good Chat</li>
<li>Food Panda</li>
<li>Domino'd</li>
<li>Clickfood</li>
<li>Smartyo</li>
<li>Tide</li>
<li>Webseries</li>
<li>GoPro</li>
<li>Liveshow</li>
</ol>

Add a set width (say 3em)...and align the text to the right.

ol {
  counter-reset: item;
  columns: 2;
}

ol li {
  display: block;
  margin-bottom: 10px;
}

ol li::before {
  content: counter(item) " ";
  counter-increment: item;
  padding-right: 15px;
  border-right: 2.5px solid rgba(37, 194, 240, 0.8);
  margin-right: 15px;
  width: 3em;
  text-align: right;
  display: inline-block;
}
<ol>
  <li>My abc</li>
  <li>LiveColor</li>
  <li>LiveFood</li>
  <li>Ola</li>
  <li>Uber</li>
  <li>Good Chat</li>
  <li>Food Panda</li>
  <li>Domino'd</li>
  <li>Clickfood</li>
  <li>Smartyo</li>
  <li>Tide</li>
  <li>Webseries</li>
  <li>GoPro</li>
  <li>Liveshow</li>
</ol>

Styling lists, The <ul> and <ol> elements have a top and bottom margin of 16px ( 1em ) The list items ( <li> elements) have no set defaults for spacing. Then the larger margin on the LI’s would win out over the smaller margin you may prefer for after the list. Just have to try to style accordingly I suppose. Yes, that is how collapsing margins

Try these css codes..

ol{counter-reset: item;columns: 2;}
ol li{display:block;margin-bottom:10px;position: relative;padding-left: 40px;}
ol li::before {
    content: counter(item) " ";
    counter-increment: item;
    position: absolute;
    left: 0px;
}
ol li::after {
    content: " ";
    position: absolute;
    background-color: rgba(37, 194, 240, 0.8);
    height: 100%;
    width: 2px;
    top: 0px;
    left: 25px;
}

Variation - adding space around list items, Space can be added between each list item by setting a margin on the "LI". ul { list-style-type: none; padding: 0; margin: 0; text-align: right; width: 10em; } li Don’t specify a fixed width on the ul, but make it display as inline-block instead. (And if you need it horizontally centered, then use text-align:center on the parent element.) div { text-align:center; } #menubar { display:inline-block; margin:0 auto; list-style:none; border:1px solid grey; border-radius:3px; margin-top:5px; padding:0; height:26px; text-align:left; /* reset text-align

You can try a table layout without the need of setting a fixed width and it will work whataver the numbers you will be using.

ol {
  counter-reset: item;
  columns: 2;
}

ol li {
  display: table-row;
}

ol li::before {
  display:table-cell;
  /*text-align:right; uncomment this if you want to align to the right  */
  content: counter(item) " ";
  counter-increment: item 99;
  padding-right: 30px;
  padding-bottom: 10px;
  /* we use background instead of border */
  background: linear-gradient(rgba(37, 194, 240, 0.8),rgba(37, 194, 240, 0.8)) 
     right 15px top 0/ /* right=padding right*/
     2.5px calc(100% - 10px) /* width=2.5px height=100% - padding bottom */
     no-repeat;
}
<ol>
  <li>My abc</li>
  <li>LiveColor</li>
  <li>LiveFood</li>
  <li>Ola</li>
  <li>Uber</li>
  <li>Good Chat</li>
  <li>Food Panda</li>
  <li>Domino'd</li>
  <li>Clickfood</li>
  <li>Smartyo</li>
  <li>Tide</li>
  <li>Webseries</li>
  <li>GoPro</li>
  <li>Liveshow</li>
</ol>

Best Practices for List Spacing (both UL & OL) - HTML & CSS, Mostly concerned with spacing between list items, but also with left-indent but then I have to factor this space in to the bottom list item and what comes after it. Any better way to create an equal left-indent with bullets or numbered lists in IE� To create space between list bullets and text in HTML, use CSS padding property. Left padding padding-left is to be added to tag list item i.e. tag. T

If you want to target only certain items, you could use the :nth-of-type selector:

ol li:nth-of-type(n+10)::before {

}

How to create space between list bullets and text in HTML?, To create space between list bullets and text in HTML, use CSS padding property. Left padding padding-left is to be added to <ul> tag list item i.e. <li> tag. Through this, padding gets added, which will create space between list bullets and text in HTML. In ordered lists, without intervention, if you give “list-style-position” the value “inside”, the second line of a long list item will have no indent, but will go back to the left edge of the list (i.e. it will left-align with the number of the item). This is peculiar to ordered lists and doesn’t happen in unordered lists.

Fighting the Space Between Inline Block Elements, Although you gotta admit, it feels weird. <ul> <li>one <� If you want to show ul, li in horizontal manner then you can use CSS style display:inline. [code]ul li { display: inline; } [/code]Then you can set the padding and margin as per your need.

Equidistant Objects with CSS, PASS: First on the left, float the rest right in equal size boxes In fact, if they are, and also inside of boxes that divide the rest of that space evenly, that might just do it. background: red; } #container:after { content: ''; width: 100%; /* Ensures there are #expando ul { margin:0; padding:0; list-style-type:none; } #expando ul li� when create an ordered list, unordered list, or definition list i always get a blank line above and below it. HTML isn't as nice about ignoring white space as one would think. *grumble

Creating Lists - Learn to Code HTML & CSS, Creating an unordered list in HTML is accomplished using the unordered list A description list may contain numerous terms and descriptions, one after the other. <li> elements within a single line, with a single space between each list item. page, we'll want to ensure that they remain an equal distance apart vertically. To begin a list, it will tell you how many items there are in the list; It will describe the type of bullet used to denote each list item, from the following: Unordered Lists: “ bullet” for type=”disc”, “white bullet” for type=”circle”, “black square” for type=”square”

Comments
  • it worked, but when there are more texts in li, which will tend to go in two lines, will not show properly. Next line should start from the same position from the previous line.
  • Please @Paulie_D can you assist me?
  • I've found the solution using text-indent:-70px; to the li.
  • It worked, but when there are more texts in li, which will tend to go in two lines, will not show properly. Next line should start from the same position from the previous line. Please can you assist me?
  • Tried it but it is not working. I've found the solution using text-indent:-70px; Thank you for your help.