Any thoughts on a pure CSS solution color behind letters?

A deviously simple-looking challenge. Just a block of text with a background color. That only goes behind the text. 🙂 Obviously not looking for a hard-coded clip path or something, but a general solution.
No description
6 Replies
Chris Bolson
Chris Bolson•9mo ago
Placing the text inside an inline element such as a span with a background color should be enough.
lonmakes
lonmakes•9mo ago
The trick is padding.
Chris Bolson
Chris Bolson•9mo ago
You can try using
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
MarkBoots
MarkBoots•9mo ago
didn't know about that one. nice
No description
capt_uhu
capt_uhu•9mo ago
ahh, perfect opportunity: If you like box-decoration-break and would like it unprefixed and consistent across browsers feel free to give my Interop2024 proposal for it a thumbs up: https://github.com/web-platform-tests/interop/issues/486
lonmakes
lonmakes•9mo ago
Exactly the sort of obscure property I was looking for! 😸 I tried stacked shadows but they got real funky.