html – Styles the block with a separate background block and the text inside it.

The effect I’m after is the different background on the block and the text inside the block, like this:

body {
  background-color: indigo;
}
p {
  background-color: orange;
  text-align:center;
  font-size: 20px;
}
span {
  display: inline-block;
  padding: 0 0.5em;
  background-color: moccasin;
}
<p><span>Highlight this text</span></p>

Is there any way to do this without it? <span> Element? So only with CSS and the following HTML markup?

<p>Highlight this text</p>

I was looking at the list of pseudo classes and pseudo elements available, but couldn’t see anything that could work.

Write a Comment

Your email address will not be published. Required fields are marked *