I played around with ::marker which is supported by all major browsers.

When changing the font size I noticed that the marker / bullet is not inline with the text. With inline I mean that the top of the bullet should be inline with the top of the text.

I tried resetting paddings and margins without luck.

Is there a way to fix this without making the bullet smaller and still use the ::marker?

ul {
  margin: 0;
  padding: 0;
  margin-left: 4rem;
}

li::marker {
  margin: 0;
  padding: 0;
  font-size: 5rem;
}

<ul>
  <li>Chocolate bar chocolate bar sweet roll caramels oat cake marzipan chocolate apple pie shortbread. Halvah donut jelly beans pie liquorice brownie gummi bears marzipan cotton candy. Cake pudding bonbon liquorice sweet roll.</li>
  <li>Chocolate bar chocolate bar sweet roll caramels oat cake marzipan chocolate apple pie shortbread. Halvah donut jelly beans pie liquorice brownie gummi bears marzipan cotton candy. Cake pudding bonbon liquorice sweet roll.</li>
</ul>

CodePudding user response：

Unfortunately, at the moment, there is no way to specify ::marker's padding or margin. According to the spec, the allowable properties are:

• all font-properties
• white-space,
• color
• text-combine-upright, unicode-bidi and direction
• content
• all animation and transition properties.

Anything else is not supported, at least for now. You can't use margin, padding, position, top/left/....

If you need more control over your markers, use list-style-type: none and either use :before (works for most use cases) or simply prefix the contents of each <li> with a <div ></div>, which gives you full control:

li { list-style-type: none; }
li>.marker {
  /* go wild... */
}

Example:

ul {
  list-style-type: none;
  padding-left: 0;
}
li {
  padding-top: .5rem;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
li:before {
  font-size: 5rem;
  margin-top: -.5rem;
  content: '•';
  display: flex;
  justify-content: flex-end;
  flex: 0 0 .6em;
  line-height: .4em;
  padding-right: .2em;
}

<ul>
  <li>Chocolate bar chocolate bar sweet roll caramels oat cake marzipan chocolate apple pie shortbread. Halvah donut jelly beans pie liquorice brownie gummi bears marzipan cotton candy. Cake pudding bonbon liquorice sweet roll.</li>
  <li>More chocolate.</li>
  <li>Chocolate bar chocolate bar sweet roll caramels oat cake marzipan chocolate apple pie shortbread. Halvah donut jelly beans pie liquorice brownie gummi bears marzipan cotton candy. Cake pudding bonbon liquorice sweet roll. Chocolate bar chocolate bar sweet roll caramels oat cake marzipan chocolate apple pie shortbread. Halvah donut jelly beans pie liquorice brownie gummi bears marzipan cotton candy. Cake pudding bonbon liquorice sweet roll.</li>
</ul>

CodePudding user response：

It is most likely due to the margin of the text because that is what sends those bullet points away. Have you tried removing the ul{} properties and then running it?