Getting text to highlight only where there is text

[aap]

Hi
I am trying to recreate the text highlight here https://www.9spokes.com/,
specifically the text that reads “See your business more clearly.”

1. the highlight shortcode highlights areas with and without text and I have little control over color, border radius, etc.

2. I found this on your forum, which seems to be exactly what i am trying to accomplish, but i cannot get it to work.

2.5) I setup a test page (to follow in secure note) and saw that:
2.5.1) the class I created per point 2 only worked on headlines, not on regular text.
2.5.2.) the highlight is being applied to the whole line, whereas there is text or mot.

Can you please tell me what i am doing wrong.

Thanks!

[basanta]

Hi There,

The suggested CSS in the other post is for only headline and in headline there is a span tag where as there is no span tag in text element.

Please use this css for Text element.

.my-highlighttext {
	background-color: hsl(300, 100%, 50%); /*magenta*/
	padding-left: 5px;
	padding-right: 5px;
       display: inline-block;
}

For the other question about the background size please use this updated CSS for heading.

.my-highlight span {
	background-color: hsl(300, 100%, 50%); /*magenta*/
	padding-left: 5px;
	padding-right: 5px;
        display: inline-block;
}

Hope this helps!