[Resolved] How to Highlight Marked Text With Background Color

[Felix]

Hello Team GP,

I am using the stream-layout and currently, if I mark a text, the letters are highlighted yellow according to class=”gb-highlight”, which does not look so good on a white background.

Hence, I would like to add a colored background with slightly curved edges, when I mark a text.

Could you help me out with the according CSS?

Much appreciated!

[Ying]

Hi Felix,

You could try this CSS to add a background color to highlighted text:

mark.gb-highlight:before {
    background-color: #4fd4e7;
    position: absolute;
    display: inline-block;
    top: 30%; /*adjust it for re-positioning*/
    left: 0;
    right: 0;
    z-index: -1;
    height: 75%; /*adjust it for box height*/
    content: "";
}

It will give you a rectangular look of background box. The example page is adding 2 background image to it, are you sure you want to go with this way?
https://www.screencast.com/t/GHFxsDYo

Let me know 🙂

[Felix]

Thank you for your prompt response, Ying! However, I am not exactly sure, if the CSS is having the effect, I was looking for. Oddly, it seems to adjust the background-color of the box, not the text :/

I applied it on my website, could you have a look at and let me know what you think/how to adjust the top/height-attributes accordingly?

The example page is adding 2 background image to it, are you sure you want to go with this way?

That s interesting. If there is no other way to soften/round the corners of the rectangular, I would like to add the two images right and left, too. I like that it gives it a nice look, as if marked by a real marker.
I can create and upload the images. However, could you provide me with the CSS to load them?

Thanks again!

[Elvin]

Hi there,

That s interesting. If there is no other way to soften/round the corners of the rectangular, I would like to add the two images right and left, too. I like that it gives it a nice look, as if marked by a real marker.
I can create and upload the images. However, could you provide me with the CSS to load them?

Yes that’s how the reference site does it. It uses this:
https://www.adam-riese.de/assets/img/left_highlight.svg

And this: https://www.adam-riese.de/assets/img/right_highlight.svg

But this is quite tricky to implement as the HTML structure of your site and the reference is significantly different and is not conducive for use of this images.

Alternative to this, we can try using border-radius instead.

Try this CSS:

mark.gb-highlight {
    position: relative;
    z-index: 1;
}

mark.gb-highlight:before {
    background-color: #4fd4e7;
    position: absolute;
    display: inline-block;
    top: 30%;
    left: 0;
    right: 0;
    z-index: -1;
    height: 75%;
    content: "";
    border-radius: 30px 30px 20px 20px;
}

[Felix]

That is great, Elvin: the border radius does the trick just fine!

One last thing: why is the formatting only applying on the first line of the marked text? I.e. if the marked text spread over more than one line in the front-end, the nice background formatting is not being applied on the second line onwards (please refer to my website, esp. in mobile formatting).

How can we fix this little detail?

[Ying]

Hi Felix,

It’s because the height is set to 50%, so it won’t be able to cover the text entirely, especially when the text wraps.

We could use a media query to set specific value for mobile, and I added a width, try it out 🙂

@media (max-width: 768px) {
    mark.gb-highlight:before {
        background-color: #4fd4e7;
        position: absolute;
        display: inline-block;
        top: 0;
        left: -4.5%;
        width: 150%;
        z-index: -1;
        height: 100%;
        content: "";
        border-radius: 20px 40px 25px 25px;
    }
}

But still, it’s gonna be difficult to fit in all different shapes of texts when they wraps.

[Felix]

Could you guys have another look please. I guess I was misunderstood, it is not an issue with the height, nor with the width of the site on mobile.

It seems that the ::before selector is applying the formatting on the first row of text only, if the text is spreading over several rows. See screenshot Issue with marker

Any other ideas, how to best solve it? Adding width did not help.

Merci upfront

[David]

Hi there,

tricky one … remove the existing CSS and try this:

mark.gb-highlight {
  background-color: #4fd4e7;
  border-radius: 10px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 10px;
  line-height: 1.5;
}

[Felix]

Great, thank you all!

[David]

Glad we could be of help

[Author]

Posts