Timeline for answer to CSS: Control space between bullet and <li> by Kal
Current License: CC BY-SA 4.0
Post Revisions
8 events
| when toggle format | what | by | license | comment | |
|---|---|---|---|---|---|
| Jul 18, 2024 at 2:52 | comment | added | Kal |
Not sure why you were seeing a margin on ::marker. I just tested an unstyled list in Safari, Firefox and Chrome, and there's no padding of margin on either the ::marker or the li. Were you looking at a list with custom CSS perhaps? Yes, like you say in the next comment, it's 'almost like there's some hidden pseudo-element after ::marker'. That's kind of what I said in my answer, which explains how you can easily use that same principle to customise your spacing as per the original question. I also mentioned @counter-style, but it wasn't well supported at the time of posting.
|
|
| Jul 16, 2024 at 19:35 | comment | added | Vanuan | Investigating further, CSS Lists 3 specifies @counter-style fragment which has a suffix property. CSS Counter Styles 3 is not a draft but candidate recommendation which is almost like a standard. w3.org/TR/css-counter-styles-3 | |
| Jul 16, 2024 at 17:38 | comment | added | Vanuan | I've just rechecked, and the gap is not always displayed as a right margin of the marker. More often it is just not attributed to any element. You have a marker and you have text. Almost like there's some hidden pseudo-element after ::marker. | |
| Jul 16, 2024 at 17:11 | comment | added | Vanuan |
if you open unordered list with a disc marker in Inspector in Chrome you'll see that the ::marker element is an inline element with margin-left set to 16px (1rem). And the content of the marker doesn't have any spaces. I haven't checked other browsers, but I suspect they have similar implementation
|
|
| Jul 16, 2024 at 16:52 | comment | added | Vanuan | suffix is only used for counter markers. The unordered list standard markers don't use suffix, they use margin. The spec doesn't define this, it's implementation detail in Chrome. In other browsers it can be implemented differently. | |
| Jul 15, 2024 at 3:53 | comment | added | Kal | @Vanuan, what makes you conclude that the default spacing is provided by margin-right? In the link you provided, the last response by Loirooriol says: 'Currently there is no margin, the gap is caused by a space character in the suffix. Once margin is supported, the margin will just add extra separation in addition to the space.' | |
| Jul 14, 2024 at 17:01 | comment | added | Vanuan |
This is not how the default marker spacing is added in the browsers. In Chrome, for example, the default spacing is added by hardcoding margin-right: xx to the ::marker pseudo-element for corresponding predefined marker. Sadly, ::marker doesn't support margin yet: github.com/w3c/csswg-drafts/issues/4571
|
|
| Sep 9, 2022 at 2:24 | history | answered | Kal | CC BY-SA 4.0 |