CODEWITHSUNDEEP
csslistmarker
Jens Törnell
Jens Törnell

Reputation: 24768

CSS list marker not inline with text

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>

Upvotes: 1

Views: 3751

Answers (1)

tao
tao

Reputation: 90148

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

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 class="marker"></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>

Upvotes: 5

Related Questions