Custom ol li indent

html hanging indent bulleted list
html unordered list indent second line
css list indent
list-style-position
list-style-type
css indent second line of wrapped text
list-style-position outside not working
html indent list without bullets

I found some topics related to this issue but none of them helped me.

How can I fix that the second line of the li respects the indent as it does the first line?

ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: my-awesome-counter;
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

ol li {
  counter-increment: my-awesome-counter;
  margin: 1rem 0.25rem;
  line-height: normal;
}


ol li:before {
  display: inline-block;
  content: counter(my-awesome-counter);
  width: 40px;
  height: 40px;
  line-height: 24px;
  background: #000;
  border-radius: 25px;
  color: white;
  text-align: center;
  margin-right: 0.5rem;
  font-size: 24px;
  font-weight: 700;
 }

What am I missing?

Try giving negative margin to pseudo element and a padding-left to the li as shown in code:

ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: my-awesome-counter;
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

ol li {
  counter-increment: my-awesome-counter;
  margin: 1rem 0.25rem;
  line-height: normal;
  padding-left: 3rem;
}

ol li:before {
  display: inline-block;
  content: counter(my-awesome-counter);
  width: 40px;
  height: 40px;
  line-height: 24px;
  background: #000;
  border-radius: 25px;
  color: white;
  text-align: center;
  margin-right: 0.5rem;
  font-size: 24px;
  font-weight: 700;
  margin-left: -3rem;
}
<ol>
  <li>abv asfbakjh dslsjdgljs lsgljgklj ljsdgll lslgklsdljlsdjgjksd lljljkj hghjgjhgjhgjhjg gjhghjsdf . dgdsg dfg fgsdfsg fg dsfgsf sdfg</li>
  <li>abv asfbakjh dslsjdgljs lsgljgklj ljsdgll lslgklsdljlsdjgjksd lljljkj hghjgjhgjhgjhjg gjhghjsdf . dgdsg dfg fgsdfsg fg dsfgsf sdfg</li>
  <li>abv asfbakjh dslsjdgljs lsgljgklj ljsdgll lslgklsdljlsdjgjksd lljljkj hghjgjhgjhgjhjg gjhghjsdf . dgdsg dfg fgsdfsg fg dsfgsf sdfg</li>

</ol>

Consistent list indentation, ol { list-style: none; counter-reset: my-awesome-counter; } ol li { Recipe sites are great places to look for custom list styles, as lists of Probably negative margin or negative text-indent… depends on your custom styling! See the Pen Custom List Counters by Chris Coyier (@chriscoyier) on CodePen. The keyframers made a Pen the other day that used pretty cool styles. Here’s a redux: See the Pen Custom List Style 3 by Chris Coyier (@chriscoyier) on CodePen. Recipe sites are great places to look for custom list styles, as lists of steps are such a prevelant feature.

Try using position:absolute; for pseudo element and give padding-left to <li>

see updated snippet:

ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: my-awesome-counter;
  /*columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
  */
  width: 300px;
}

ol li {
  counter-increment: my-awesome-counter;
  margin: 1rem 0.25rem;
  line-height: normal;
  padding-left: 60px;
  position: relative;
}

ol li:before {
  display: inline-block;
  content: counter(my-awesome-counter);
  width: 44px;
  height: 40px;
  line-height: 24px;
  background: #000;
  border-radius: 25px;
  color: white;
  text-align: center;
  margin-right: 0.5rem;
  font-size: 24px;
  font-weight: 700;
  position: absolute;
  left: 0;
}
<ol>
  <li> test test test testtest test test testtest test test testtest test test testtest test test testtest test test test</li>
  <li> test test test testtest test test testtest test test testtest test test testtest test test testtest test test test</li>
</ol>

Custom List Number Styling, Nested numbered list with correct indentation in CSS. ol {. list-style-type: none;. counter-reset: item;. margin: 0;. padding: 0;. } ol > li {. display:  ul, ol { padding: 0; margin-left: 1em; } This will make your list numbering flush with any other text elements (paragraphs, etc.) nearby in nearly every browser I've tried it on.

Your missing is you added counter in pseudo element but you expecting as like ol li default styling, although you reset the ol default behavior by adding list-style: none;. To work as expected you should follow below way:

ol {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: my-awesome-counter;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}
ol li {
    counter-increment: my-awesome-counter;
    margin: 1rem 0.25rem;
    line-height: normal;
    position:relative;
    padding-left:45px;
    min-height:40px;
}
ol li:before {
    display: inline-block;
    content: counter(my-awesome-counter);
    width: 40px;
    height: 40px;
    line-height: 36px;
    background: #000;
    border-radius: 25px;
    color: white;
    text-align: center;
    margin-right: 0.5rem;
    font-size: 24px;
    font-weight: 700;
    position:absolute;
    left:0;
    top:0;
}

Nested numbered list with correct indentation in CSS. Live example , As you'd imagine, this will work for both ordered (OL) and unordered (UL) lists. li { list-style-position: inside; text-indent: -1em; }. Similar Posts:. Add left padding in LI element. We must provide space in each element of list. Add in LI element position: relative, it is needed to set right position of ::before pseudo-element bullet. Create “li::before” pseudo-element: Add property “content” – only with this property it will be appear. Add some dimensions, in my example 10×10 px.

Try giving the before's position absolute so that it will appear on the top of the list

I've attached two examples here:

1st one is the answer.

2nd one is why we should give position absolute.

<!DOCTYPE html>
<html>
<head>
<style>
ol{width:250px;}
ol.a{
  list-style-position: outside;
  margin: 0;
  counter-reset: my-awesome-counter;
  display:block;
  position: relative;
  list-style-type:none;
  }
ol.a li {
  counter-increment: my-awesome-counter;
  display:block;
  padding-left: 10px;
  margin-bottom: 10px;
}

ol.a li:before {
  display: inline-block;
  content: counter(my-awesome-counter);
  width: 40px;
  height: 40px;
  line-height: 24px;
  background: #000;
  border-radius: 25px;
  color: white;
  text-align: center;
  margin-right: 0.5rem;
  font-size: 24px;
  font-weight: 700;
  position:absolute;
  left: 0;
 }
 ol.b li:before{
     display: inline-block;
  content: counter(my-awesome-counter);
  width: 40px;
  height: 40px;
  line-height: 24px;
  background: #000;
  border-radius: 25px;
  color: white;
  text-align: center;
  margin-right: 0.5rem;
  font-size: 24px;
  font-weight: 700;
  }



</style>
</head>
<body>
 <h2>With `postion:absolute`</h2>
<ol class="a">
  <li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
   <li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
   <li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
</ol>
 <br><br>
<h2>Without `position:absolute`</h2>
   <ol class="b">
  <li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
   <li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
   <li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
</ol>

</body>
</html>

How To Keep Indentation For The Second Line Onwards In Your , In the following example a value of 20px:- ul { list-style: none; width: 200px; text-​indent: -20px; /* key property */ margin-left: 20px; /* key property  Lists (ul, ol, li) removing indent completely? ePub. Whoops, pasted wrong version of the code. Yeah, it was supposed to be without % and it does not help.

Try giving display: flex to the ol li.

Like this:

ol li {
  counter-increment: my-awesome-counter;
  margin: 1rem 0.25rem;
  line-height: normal;
  display: flex;
}

Working demo here: https://codepen.io/NightShade1993/pen/ReQWOb

CSS - Indenting the second line of LI (List Items), Mostly concerned with spacing between list items, but also with left-indent issues across all browsers. These are NOT menus. I have usually added bottom margin​  This list item has no marker (otherwise known as a "bullet") and is not yet part of a list itself. It hangs alone in the void, simple and unadorned, as shown in Figure 1. That dotted red border represents outer edges of the content-area of the list item. Remember that, at this point, the list item has no padding or borders.

Best Practices for List Spacing (both UL & OL) - HTML & CSS, <li> indicates a line item in either an unordered or ordered list of items which means your lists will include that extra left indentation. Do you have an ordered list and want to use a custom font to match the rest of your email  Desktop-as-a-Service Designed for Any Cloud ? Use these to jump around or read it all! I have received a good many letters asking how I do indented paragraphs and those bullet lists. The little bullets aren't images. They are placed there through HTML Commands. In fact, the entire list format can be created through commands.

Litmus Blog: The Ultimate Guide to Bulleted Lists in HTML Email, An ordered list, created using the OL element, should contain information where We discourage authors from using lists purely as a means of indenting text. As far as the default left indent of the LI you should always reset the margin and padding. <UL>s and <OL>s have a list indent, applied via left margin on IE and left padding on FF, therefore both

Lists in HTML documents, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  The list-style-type property specifies the type of list item marker. Note: Some of the values are for unordered lists, and some for ordered lists. The list-style-image property specifies an image as the list item marker: The list-style-position property specifies the position of the list-item markers (bullet points).

Comments
  • Thanks, i was trying to avoid using absolute position and tried this approach before with the same result, the li is messing the line heights. first line is too big in comparison with the following lines
  • Thanks, I was trying to avoid absolute positions but at the end I think there is no other way... thanks i'm gonna go for this approach