[csswg-drafts] Custom Pseudo Elements via New pseudo-before/pseudo-after Attribute (#11670)

Karric has just created a new issue for https://github.com/w3c/csswg-drafts:

== Custom Pseudo Elements via New pseudo-before/pseudo-after Attribute ==
**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:**
```HTML
<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.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11670 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 7 February 2025 13:48:34 UTC