Adding text highlight

badinfo
Tourist
7 0 2

Hi,

 

I would like to know how I can add highlighted text like this (little bit rounded corners) to a specific text:

DEA6CB2B-93ED-4BA6-9784-839CE2E7107E.png

Like for example the following text on my product page:

Screenshot 2021-05-09 at 18.14.45.png

Website: babypads.nl

Password: test

0 Likes
OpenThinking
Shopify Partner
237 55 66

Hi there,
Jack from OpenThinking here!

You can do that like so

<style>
.o1 { background: white; color: #5A080D; border-radius: 4px; padding: 4px; padding-right: 8px; margin-right: -5px }
.o2 { background: #5A080D; color: white; border-radius: 4px; padding: 4px; }
</style>

<div>
<span class="o1">alleen</span><span class="o2">samen</span>
<span class="o2">krijgen we corona onder controle</span>
</div>

 live example here: https://jsfiddle.net/g8jrb9xw/ 


let me know if this works for your. If yes; accept my answer and give me thumbs up! Thank you.

⚡️ Get our [Shopify Themes]: Lightning-fast, eye-catching, highly converting, SEO-optimised, Minimal.
⚡️ Struggling with CODE? You need a Shopify expert to help you with your theme! [Get a free quote]
0 Likes