Custom Pseudo Elements via New pseudo-before/pseudo-after Attribute

[Karric]

Problem Statement:
• It's common to want to add a series of icons to an element, often derived from attributes. Each icon usually needs to be a separate element for UI reasons.
• Currently, you would have to actually create an element for each icon. It is tempting to use pseudo-elements for this since they are lightweight, but we're limited to before/after.

Proposal:
• Introduce two new HTML attributes: pseudo-before, pseudo-after. Their values are a space separated list of strings, like class. A pseudo element is created for each delimited string, with that string being the name of the pseudo element for CSS purposes. The -before/-after suffix is to control where in the DOM they appear.

Example:

<icons pseudo-before="checkmark thumbs-up star">
   :checkmark
   :thumbs-up
   :star
   <button>Reply</button>
</icons>

CSS
:checkmark,:thumbs-up,:star { ... }
:checkmark { content: '✅'; }
:thumbs-up { content: '👍'; }
:star { content: '⭐'; }

Implementation Notes:
• Requiring HTML markup for this might help with engine optimizations.
• This largely clones the before/after pseudo element implementation, so I'm hoping it's not too far fetched.
• The order of the pseudo elements is the same as they appear in the attribute. This can be overridden with grid/flex as usual.
• By using an attribute to spawn them, I don't foresee any paradoxes or loops caused by :has().

Other Notes:
• Hyphen/underscore should be allowed in the pseudo element name for legibility reasons, but probably not as the first character.
• This is more of an HTML proposal, but the CSS side is what makes it viable.

[Loirooriol]

Introduce two new HTML attributes

Propose them to the WHATWG, then? But they would probably be rejected for being stylistic instead of semantic.

But I don't see why you want them to be HTML attributes instead of CSS properties.

A pseudo element is created for each delimited string

That would trivially clash with standard pseudo-elements. Even with <custom-ident> restricted to non-existing pseudo-elements, it would still be a forwards-compatibility liability. The names should be restricted to dashed idents or something.

The -before/-after suffix is to control where in the DOM they appear

There is still the question of their position relative to ::marker, ::before, ::after, etc.

Requiring HTML markup for this might help with engine optimizations

What optimizations do you have in mind?

loops caused by :has()

Should be covered by #7463 (comment)

Hyphen/underscore should be allowed in the pseudo element name for legibility reasons

Should be <custom-ident> or <dashed-ident>.

[lukewarlow]

Could this maybe create some ::part() instead to avoid the clashes mentioned above?