I think I've seen it on quite a few sites. It would be nicer if you could do a ::before and maybe also specify pull width to be the width of a quotation mark:
(I think you can do something like that with container query units [1], but I haven't managed to do it just yet.)
UPD: container query wouldn't work here because if you set `container-type: inline-size` on dquo-pull, it will get inline size set to zero, as if it had no content [2].
If I remember correctly, pseudo-elements act as they are children of their "parent" element, e.g.
<dquo-pull><::before></::before>... </dquo-pull>
In that case the ::before element doesn't linebreak independently from its "parent" element and so those two elements are always together, even at a break before the start of a new line.
You could set `display: contents` on the outer element – this will put ::before in the parent flow instead. But then the quote mark becomes a text node and you can't pull that back without another wrapper element:
And then she said:
<char-hang><span>“</span></char-hang>Hello,
handsome! What a day, huh?
which will be rendered like this:
"And then she said: "
<!-- push: -->
<char-hang::before />
<!-- pull: -->
<span>“</span>
"Hello, handsome! What a day, huh?"
Without adding another element, you can use a hack though: make the quote mark transparent and use text-shadow to “move” it back instead: https://jsfiddle.net/utjxnv1r/3/
And if we allow JS, we can just create a custom element and avoid those hacks altogether (also you don't have to calculate / eyeball the offset you need anymore): https://jsfiddle.net/c72uLtma/
UPD: container query wouldn't work here because if you set `container-type: inline-size` on dquo-pull, it will get inline size set to zero, as if it had no content [2].
[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/length#cont...
[2]: https://drafts.csswg.org/css-contain-3/#containment-inline-s...
> although now with `hanging-punctuation` it is unnecessary
`hanging-punctuation` only works at the start of the block element though. Maybe that'll change in the future though!