Highlight Heading Elementor

1. Add this to the Elementor Heading Widget:

Kostenfreies <span class="highlight">Videokonzept</span> erhalten

2. Add this Custom CSS in Elementor (Advanced → Custom CSS)

.highlight {
    position: relative;
    display: inline-block;
    background: linear-gradient(to right, #F5C324 100%, #F5C324 100%);
    background-size: 100% 0.3em;
    background-position: 0 100%;
    background-repeat: no-repeat;
    padding-bottom: 3px;
}

Why This Works:

✅ Uses background gradient instead of ::before, which is more reliable in Elementor.
✅ The background-size: 100% 0.3em; ensures the yellow highlight covers the text width.
✅ The padding-bottom: 3px; aligns the highlight under the text properly.

Now the yellow highlight should 100% show up in Elementor! 🎨✨

1. Add this to the Elementor Heading Widget:

2. Add this Custom CSS in Elementor (Advanced → Custom CSS)

Why This Works: