Highlight css with overlap

Question

I'm looking for a very specific look for a site I'm designing and have run into a brick wall. I'd like to "highlight" quotes and <h2> tags, with the background color overlapping (similar to if you used a real highlighter).

This is an example of what I'd like to do:

I've tried several options.

Trying to edit the style of the tag,
using background gradients with a slight opacity, etc. and I simply cannot get it to work.

Here's my latest attempt, which looks like garbage as the gradient does not produce the look I am going for, and the background seems to be seen as one element and does not overlap on multiple 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!

For my answer below, you can change the '0.3' in the background-color style to something a little less transparent if you want to match exactly to the example in your post — Blue Boy
– Blue Boy, Commented Jun 3, 2016 at 0:27

AliNajafZadeh · Accepted Answer · 2022-09-08 14:08:39Z

5

Here is a solution:

Use background-color: rgba(255,255,0,0.3); to make the yellow transparent

And margin-bottom: -15px; to make them overlap

HTML and 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;
    }

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

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

edited Sep 8, 2022 at 14:08

AliNajafZadeh

1,3342 gold badges15 silver badges26 bronze badges

answered Jun 3, 2016 at 0:18

Blue Boy

6101 gold badge6 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AliNajafZadeh · Accepted Answer · 2022-09-08 13:56:18Z

1

Use background color for the text to be highlighted Ex: text inside span, and also to the container Ex: <p>.

Take a look at the fiddle 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>

edited Sep 8, 2022 at 13:56

AliNajafZadeh

1,3342 gold badges15 silver badges26 bronze badges

answered Jun 3, 2016 at 0:28

Harika Shekhar

111 bronze badge

Collectives™ on Stack Overflow

Highlight css with overlap

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related