Customizing a portion of a text element with CSS

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
highlight class

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?

Hey @pnocode :wave:

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

Editor: 805testapp42 | Bubble Editor

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

This topic was automatically closed after 70 days. New replies are no longer allowed.