Proposal for ::drag-image to style the after-image of dragged elements

[sunkanmii]

Following the proposal set in #11584, I suggest we also have a pseudo-selector called ::drag-image.

An example of what I mean is the little style you see in this demo when the nav element is dragged:

https://codepen.io/sunkanmii-the-styleful/pen/xbZLJvY

Hear me out, please. Instead of having JavaScript insert the styling for us or use CSS hacks, why can't we just have a pseudo-selector dedicated to just styling that dragged after-image?
i.e Instead of doing this with JS and the HTML Drag and Drop API:

menuBar.addEventListener("dragstart", (event) => {
  const dragPreview = document.createElement("div");
  dragPreview.textContent = "📦 Dragging...";
  dragPreview.style.cssText = `
    padding: 0.5rem 1rem;
    background: #fff6d6;
    color: #333;
    border: 2px dashed orange;
    border-radius: 0.5rem;
  `;

  document.body.appendChild(dragPreview);
...

I can simply just write this in CSS to style that after image:

::drag-image{
    content: ;
    padding: 0.5rem 1rem;
    background: #fff6d6;
    color: #333;
    border: 2px dashed orange;
    border-radius: 0.5rem;
}

I'm open to suggestions on this, please. P.S it's my first issue on W3C, yay! (I think).

[LeaVerou]

I support this (not with that name, but that's bikeshedding).
If we have a :drag pseudo-class or something along these lines (#11584) to style the element itself and a pseudo-element to style the ghost, this enables so many patterns that authors currently have to implement manually, possibly the most common of which being to hide the source and only show the ghost, with no opacity.