[css-lists] Clarify whether ::before and ::after pseudo-elements can be list-items and increment the list-item counter. #3766

emilio · 2019-03-26T17:47:40Z

The following renders differently across browsers:

<!doctype html>
<style>
  li::before, li::after { content: "Before"; display: list-item; }
  li::after { content: "After"; }
</style>
<ol>
  <li>Foo

List item is defined in https://drafts.csswg.org/css-lists/#list-item / https://drafts.csswg.org/css-lists/#declaring-a-list-item, but it doesn't clarify if ::before or ::after are supposed to increment the list item counter.

cc @MatsPalmgren @fantasai @tabatkins

Loirooriol · 2019-03-26T18:44:53Z

In #1793 (comment) it was resolved that

RESOLVED: marker exists on all elements, on ::before and on ::after but no box unless it's display: list-item

So ::before and ::after can be list-items and have a marker.
Then I would also expect the list-item counter to be increased.

…spec a bit more closely. r=mats The HTML restriction doesn't match any browser. This matches Edge, though I filed w3c/csswg-drafts#3766 about the pseudo-element condition. Differential Revision: https://phabricator.services.mozilla.com/D24936 --HG-- extra : moz-landing-system : lando

…spec a bit more closely. r=mats The HTML restriction doesn't match any browser. This matches Edge, though I filed w3c/csswg-drafts#3766 about the pseudo-element condition. Differential Revision: https://phabricator.services.mozilla.com/D24936

…e closely. The HTML restriction doesn't match any browser. This matches Edge, though I filed w3c/csswg-drafts#3766 about the pseudo-element condition. Differential Revision: https://phabricator.services.mozilla.com/D24936 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1539267 gecko-commit: 1803e27751d646abe24ff364147c64bfe55920b4 gecko-integration-branch: central gecko-reviewers: mats

fantasai · 2019-04-10T19:57:16Z

@emilio Any list item in the box tree will increment the counter, ::before/::after aren't excluded here: if it's allowed to be a list item, then it increments list-item. I think the spec is clear on this point, lmk if you'd like something edited?

emilio · 2019-04-10T21:37:35Z

@fantasai I think that the sentence "list items generate ::marker pseudo-elements" is a bit confusing, since pseudos don't generate other ::marker pseudos generally.

Maybe a note noting that the ::marker pseudo-elements generated by ::before and ::after are not addressable via selectors would clarify it? It's not clear to me what the model is there.

FremyCompany · 2019-04-11T14:27:30Z

I agree with @Loirooriol, we agreed last time that ::before and ::after can be list-items and have a marker, but that you can't address them; based on that, the tree can at most contain one level of nesting of generated content (Edge never supported even that, and ::before couldn't be a list item, but I think other browsers do support that)

The HTML restriction doesn't match any browser. This matches Edge, though I filed w3c/csswg-drafts#3766 about the pseudo-element condition. Differential Revision: https://phabricator.services.mozilla.com/D24936

Per w3c/csswg-drafts#3766 Differential Revision: https://phabricator.services.mozilla.com/D27122 --HG-- extra : moz-landing-system : lando

Per w3c/csswg-drafts#3766 Differential Revision: https://phabricator.services.mozilla.com/D27122

Per w3c/csswg-drafts#3766 Differential Revision: https://phabricator.services.mozilla.com/D27122 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1543758 gecko-commit: e4d51df238b69028b2cc7511efcea9bfe5f777a6 gecko-integration-branch: central gecko-reviewers: mats

…r pseudo-element can be selected, but not with '::marker' because that expands to '*::marker' and * doesn't match pseudos. #3826 #3766

fantasai · 2019-06-28T22:40:55Z

Added a clarification along the lines of #3826 (comment)

…e closely. The HTML restriction doesn't match any browser. This matches Edge, though I filed w3c/csswg-drafts#3766 about the pseudo-element condition. Differential Revision: https://phabricator.services.mozilla.com/D24936 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1539267 gecko-commit: 1803e27751d646abe24ff364147c64bfe55920b4 gecko-integration-branch: central gecko-reviewers: mats

Per w3c/csswg-drafts#3766 Differential Revision: https://phabricator.services.mozilla.com/D27122 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1543758 gecko-commit: e4d51df238b69028b2cc7511efcea9bfe5f777a6 gecko-integration-branch: central gecko-reviewers: mats

…spec a bit more closely. r=mats The HTML restriction doesn't match any browser. This matches Edge, though I filed w3c/csswg-drafts#3766 about the pseudo-element condition. Differential Revision: https://phabricator.services.mozilla.com/D24936 UltraBlame original commit: 1803e27751d646abe24ff364147c64bfe55920b4

Per w3c/csswg-drafts#3766 Differential Revision: https://phabricator.services.mozilla.com/D27122 UltraBlame original commit: e4d51df238b69028b2cc7511efcea9bfe5f777a6

…spec a bit more closely. r=mats The HTML restriction doesn't match any browser. This matches Edge, though I filed w3c/csswg-drafts#3766 about the pseudo-element condition. Differential Revision: https://phabricator.services.mozilla.com/D24936 UltraBlame original commit: 1803e27751d646abe24ff364147c64bfe55920b4

Per w3c/csswg-drafts#3766 Differential Revision: https://phabricator.services.mozilla.com/D27122 UltraBlame original commit: e4d51df238b69028b2cc7511efcea9bfe5f777a6

Per w3c/csswg-drafts#3766 Differential Revision: https://phabricator.services.mozilla.com/D27122

emilio changed the title ~~[css-lists] Clarify whether ::before and ::after pseudo-elements can be list-items.~~ [css-lists] Clarify whether ::before and ::after pseudo-elements can be list-items and increment the list-item counter. Mar 26, 2019

emilio added the css-lists-3 Current Work label Mar 26, 2019

moz-wptsync-bot mentioned this issue Mar 30, 2019

[Gecko Bug 1539267] Bug 1539171 - Follow the list-item definition from the spec a bit more closely. web-platform-tests/wpt#16162

Merged

fantasai added the Commenter Response Pending label Apr 10, 2019

mykmelez pushed a commit to mykmelez/gecko that referenced this issue Apr 14, 2019

Bug 1543758 - Pseudo-elements should be allowed to be list-items. r=mats

fc6aa34

Per w3c/csswg-drafts#3766 Differential Revision: https://phabricator.services.mozilla.com/D27122

emilio mentioned this issue Apr 14, 2019

[css-lists] Interaction of ::marker with other pseudo-elements. #3826

Closed

moz-wptsync-bot mentioned this issue Apr 25, 2019

[Gecko Bug 1543758] Pseudo-elements should be allowed to be list-items. web-platform-tests/wpt#16514

Merged

fantasai added a commit that referenced this issue Jun 28, 2019

[css-pseudo-4] Clarify that the marker of a list-item ::before/::afte…

67f8681

…r pseudo-element can be selected, but not with '::marker' because that expands to '*::marker' and * doesn't match pseudos. #3826 #3766

fantasai closed this as completed Jun 28, 2019

fantasai added the Closed Accepted as Editorial label Jun 28, 2019

bhearsum pushed a commit to mozilla-releng/staging-firefox that referenced this issue May 1, 2025

Bug 1543758 - Pseudo-elements should be allowed to be list-items. r=mats

2b6db01

Per w3c/csswg-drafts#3766 Differential Revision: https://phabricator.services.mozilla.com/D27122

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[css-lists] Clarify whether ::before and ::after pseudo-elements can be list-items and increment the list-item counter. #3766

[css-lists] Clarify whether ::before and ::after pseudo-elements can be list-items and increment the list-item counter. #3766

emilio commented Mar 26, 2019

Loirooriol commented Mar 26, 2019

fantasai commented Apr 10, 2019

emilio commented Apr 10, 2019

FremyCompany commented Apr 11, 2019

fantasai commented Jun 28, 2019

[css-lists] Clarify whether ::before and ::after pseudo-elements can be list-items and increment the list-item counter. #3766

[css-lists] Clarify whether ::before and ::after pseudo-elements can be list-items and increment the list-item counter. #3766

Comments

emilio commented Mar 26, 2019

Loirooriol commented Mar 26, 2019

fantasai commented Apr 10, 2019

emilio commented Apr 10, 2019

FremyCompany commented Apr 11, 2019

fantasai commented Jun 28, 2019