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: 0 0.5em;
  display:table; /* fit text content*/
  margin:auto; /* center */
  background-color: moccasin; /* main background */
  box-shadow:0 0 0 200vmax 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>