2 ms·
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 c
by ttepasse 3y ago
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.
- notpushkin 3y agoYou 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/ 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/ https://jsfiddle.net/c72uLtma/