How to make <li> bullet just stay inside container, not move text ?
Recently I tried to achieve such effect with
list-style-position: inside, but it appeared that in this mode bullet moves text. I want to know, if I can get desired effect with regular bullet or go further with css hacks.
7 Replies
Add
padding-left should do it.
Did you use a reset that removed padding from everywhere by any chance? lists have padding-inline-start as a user agent style by defaultTried
padding-left, but it just moves whole li, not bullet. Also have margin: 0, padding: 0 on body.You only want to move the bullet?
You can control the space between the bullet point and the text using
li { padding-left: Xpx}, but only if you want to increase it, we can't decrease it. There's a minimum distance that the browers set that we can't overcome without getting a little hacky
Oh wait, try list-style-type: "•" on the ul, and then you can use a positive padding-left on liIt just removed space between bullet and text
To be more clear I'll provide part of figma project. As you can see I have separator between this columns. I managed to do this with svg and
::before, but to center it all properly I need bullets to be inside the container, but act and display like default (not moving in text).
Yes, exactly !
Thank you so much 🙏