Apply background around lines of text, not box
I have a vague memory of Kevin Powell doing this in one of his videos while noting it’s a new property and not supported in every browser just yet. Though, I can’t find the video and can’t find the way to do it anywhere else.
Does anyone know how to achieve this?
5 Replies
(effect is simulated by highlighting text in browser)
Use the pseudo class ::selection and change it’s background color. The browser has some inherent rules to make sure the color contrast bw the text color and the selection color is readable
That’s what I did to simulate the effect for the screenshot. I want the background color to show even when the text is not selected.
If the element is
display: inline, such as using a span, it will have that effect when you apply a background. It however is certainly not new so I’m not sure what you saw which didn’t have supportoh yes its just a background-color on your p element then