Skip to content Skip to sidebar Skip to footer

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"