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

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.