Select css with overlap

Question

I am looking for a very specific kind of site that I am designing, and I ran into a brick wall. I would like to “highlight” tags quotesand <h2>, with the background color overlapping (similar to how you used a real marker).

This is an example of what I would like to do:

I tried several options.

• Trying to change tag style,
• using background gradients with a little opacity, etc., and I just can't get it to work.

Here is my last attempt, which looks like garbage, since the gradient does not create the appearance that I am going to, and the background seems to be visible as a single element and does not overlap on several lines:

.highlight span { 
    background-image: linear-gradient(#e2e200,#ffff00);
    opacity:1;
    color: #fff; 
    display: inline;
    padding: 0.45rem;
    box-decoration-break: clone;
}

Any thoughts would be greatly appreciated!

Answer 1

:

background-color: rgba(255,255,0,0.3);,

margin-bottom: -15px;,

HTML:

<h2 class = "highlight">
  <span>Test again</span>
</h2>
<h2 class = "highlight">
  <span>Test</span>
</h2>

CSS

.highlight span { 
    background-color: rgba(255,255,0,0.3);
    opacity:1;
    color: #555; 
    display: inline;
    padding: 0.45rem;
    box-decoration-break: clone;
    font-family: arial;
}

.highlight {
    margin-bottom: -15px;
}

JSFiddle: https://jsfiddle.net/x3t1qvud/

Answer 2

. Ex: , Ex:

.

https://jsfiddle.net/harikashekhar/93qy9406/5/

div {
  padding: 2em;
  border: 1px solid grey;
  line-height: 180%;
}
p {
  background-color: #FFFBCC;
}
span.highlight {
  background-color: #FFFBAA;
  padding: 0.2em;
}
<div>
   <p>
       <span class="highlight">This is a text. This is a text. </span>
       This is a text. This is a text. This is a text
       <span class="highlight">This is a text. This is a text</span>
  </p>
</div>