Style A Block With Separate Backgrounds On The Block Itself And The Text Within It
The effect I am after is to have different backgrounds on a block and the text within the block, like this: Is there a way of doing this without the element? So with
Solution 1:
Yes, and without pseudo element
body {
background-color: indigo;
}
p {
font-size: 20px;
padding: 00.5em;
display:table; /* fit text content*/margin:auto; /* center */background-color: moccasin; /* main background */box-shadow:000200vmax orange; /* a huge shadow to simulate the second background */clip-path:inset(0 -100vmax); /* clip the shadow to show only left/right part of it */
}
<p>Highlight this text</p>
Post a Comment for "Style A Block With Separate Backgrounds On The Block Itself And The Text Within It"