Learn how to create a stylish Highlight Heading in Elementor using a simple custom code snippet. In this tutorial, I’ll walk you through each step so you can add eye-catching, on-brand highlighted titles to any section of your WordPress site.
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! 🎨✨
