Customizing a portion of a text element with CSS

[pnocode]

Hey there, I’m trying to customize a portion of a text element using CSS to make it look like this:

I have created a class ‘highlight’ and attached it to the text element using the ‘Classify’ plugin

Then I added an HTML element to my page and pasted the following code:

p { font-size: 2rem; padding: 3em; } .highlight::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; background: #CBECE7; height: 100%; z-index: -99; transform: scale(1.1); } .highlight { position: relative; color: #0d1848; }

class="highlight">1 in 3 adults in the UK struggle to access credit.

From what I’ve researched, the ‘span’ should take care of only applying the highlight to the ‘1 in 3’ text but it’s applying it to the whole element.

Any ideas on how could I approach this?

[J805]

Hey @pnocode

I am not sure if this is what you are looking for. Would something like this help? This highlights the words using an HTML element.

Editor: 805testapp42 | Bubble Editor

Preview: https://805testapp42.bubbleapps.io/version-test/customize_text?debug_mode=true