i'm on my phone, but wouldn't something like this work?

  *::before, *::after {
    user-select: text; // or `all`?
  }

I had a look into it; user-select doesn't apply to before/after content.

This process has taught some interesting things about browsers. For example: `<br>` and `<img />` elements are "replaced" and can't really be shown in the way all other elements are. (I conveniently avoided using them).

And, as described above, ::before/::after content cannot be selected, and generally behave... strangely.

`<hr>` too? And `<marquee>`?

Did you see any variance between browsers? Hopefully not, with "common" CSS like this, but it would be interesting.

CSS spec says no, unfortunately. Pseudo-elements aren't part of the DOM and thus can't be selected by any means.

the only approach remaining would be to have some minimal vanilla js, as part of the page, that rewrites the dom to include the tags.

This would also alleviate the need to use CSS, and in particular the repetitive CSS.

It would also allow the tags/attributes to be styled in a more idiomatic way.

But i'm out of time on this idea ;)