Highlighted text

PRO

Draw attention to key words in any heading. A simple CSS snippet that adds a coloured highlight to any text wrapped in a span — easy to customise and works anywhere.

Copy

Unlock with Pro

Released

1 month ago

Category

Custom code

CSS

Built with

Need help?

Custom css

The CSS to make the effect for this power up is included in the widget settings in Advanced > Custom CSS. No additional setup needed. Just copy the component and the styles come with it.

/* HOW IT WORKS
   1. Wrap the word you want to highlight in a <span> tag in the Elementor heading widget
   2. Example: Build and <span>launch</span> websites
   3. Customise the styles below to match your brand
*/

selector span {
    background: #0093FF; /* Change highlight colour */
    padding: 0px 18px 0px 10px; /* Top, right, bottom, left spacing */
    border-radius: 8px; /* Rounded corners */
    color: white; /* Change text colour */
}