How to finetune the position of a list bullet/number

Question

I've made a list in HTML:

<ol class="listnumber">
    <li class="listnumber">
        <p class="listnumber">list number</p>
    </li>
</ol>

When I render this in Antennahouse Formatter, this is the result:

I can change the indentation of the text in CSS:

ol li {
    padding-left: 6.3mm;
    text-indent: 0mm;
    margin-left: 0mm;
    list-style-type: decimal;
}

padding-left is the distance indicated by the dark blue line. But I'd like to change the position of the number: it's centered in that 6.3 mm wide space now, and I want to align it to the left side of that space (move the number to the spot indicated by the red line).

The text-indent and margin-left do not influence this position. The only property I can find that influences the position of the number is list-style-position, but that only has values inside and outside.

Is there a way to change the position of this number?

I've tried various permutations of this:

li.listnumber:before {
    text-align: left;
}

but that has no effect on the autogenerated number.

You can get even more control if you use a pseudo element with [CSS Counters](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters) and hide the browser list style. [Exaggerated example](https://jsfiddle.net/73zpdqx5/1/). — misterManSam, Oct 10 '19 at 08:30

Ram Segev · Answer 1 · 2019-10-10T08:33:15.970

3

ol has default padding-left: 40px; see Default CSS Values for HTML Elements

you can easily change the ol padding-left with:

ol.listnumber{
   padding-left: 10px;
}

ol.listnumber {
    padding-left: 10px;
}
ol li {
    padding-left: 6.3mm;
    text-indent: 0mm;
    margin-left: 0mm;
    list-style-type: decimal;
}

<ol class="listnumber">
    <li class="listnumber">
        <p class="listnumber">list number</p>
    </li>
</ol>

edited Oct 10 '19 at 08:33

answered Oct 10 '19 at 08:27

Ram Segev

2,563
2
12
24

Interesting. This works in my browser, but not in Antennahouse Formatter. – Hobbes Oct 10 '19 at 08:32
In AHF, the property I need to change is padding-inline-start (as in one of the other answers). – Hobbes Oct 10 '19 at 08:41
The default styles for AH Formatter are in `html.css` in or under the AH Formatter installation directory. See https://www.antennahouse.com/product/ahf66/ahf-env.html#html.css and https://www.antennahouse.com/product/ahf66/ahf-tech.html#default-css. In it, the default padding for lists is specified in `em`, not `px`. – Tony Graham Oct 10 '19 at 09:49

score 1 · Answer 2 · answered Oct 10 '19 at 08:26

If you set the list-style-position to inside, you can define the red line by the padding-left of the ol. See Example and hover over the list to see the effect, I added a border for visualisation purposes.

ol {
  border: 1px solid black;
  padding-left: 0; /* or whatever*/
}

ol:hover {
  padding-left: 6mm;
}

ol li {
  list-style-position: inside;
}

ol li p {
  padding-left: 6.3mm;
  display: inline-block;
  margin: 0;
}

<ol class="listnumber">
  <li class="listnumber">
    <p class="listnumber">list number</p>
  </li>
</ol>

score 1 · Answer 3 · answered Oct 10 '19 at 08:28

Follow this link, it explains how you can remove the predefined bullet styles and create your own bullet with desired style:

https://www.w3schools.com/howto/howto_css_bullet_color.asp

ul {
    list-style: none; /* Remove default bullets */
}

ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: red; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

Hope this helps, thanks.

I've done this in the past, and it works, but has potential complications for numbered lists. — Hobbes, Oct 10 '19 at 08:42

score 1 · Accepted Answer · answered Oct 10 '19 at 08:36

1

I have tried one solution for this

We have below default css property for ol element

  padding-inline-start: 40px;

We can override this property as below

 padding-inline-start: 10px;

Below is the code snippet

ol {
  padding-inline-start: 10px;
}

li {
    padding-left: 10px;
    text-indent: 0mm;
    margin-left: 0mm;
    list-style-type: decimal;
}

<ol class="listnumber">
    <li class="listnumber">
        <p class="listnumber">list number</p>
    </li>
</ol>

I hope it will help Thanks...

answered Oct 10 '19 at 08:36

Shrirang Kadale

472
1
4
16

AH Formatter does not currently implement `padding-inline-start`. – Tony Graham Oct 10 '19 at 09:53
@TonyGraham We can do it by adding `padding-left: 10px` to ol element as well – Shrirang Kadale Oct 10 '19 at 10:01
@ShirrangKadale: True, but `padding-inline-start` is being ignored as an unknown property, so specifying any value of `padding-inline-start` won't change anything. – Tony Graham Oct 10 '19 at 10:18

score 1 · Answer 5 · answered Oct 10 '19 at 09:42

1

Give the ::marker a width and left-align its content:

li::marker {
  text-align: start;
  width: 6.3mm;
}

answered Oct 10 '19 at 09:42

Tony Graham

7,306
13
20

How to finetune the position of a list bullet/number

5 Answers5