This is a simplified version of my code, focusing on the essential information.
<div class="container">
<div class="newsletter">
<div class="newsletter_title">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-5 col-lg-4 col-xl-3 col">
<h2 class=".newsletter .newsletter_title">
<span>Newsletter</span>
</h2>
</div>
</div>
<div class="row">
<div class=" col-xs-12 col-sm-7 col-md-7 col-lg-8 col-xl-9 col">
<div id="newsletter_embed_signup_scroll">
<div class="col-xs-12 col-md-12 col-lg-6 col-xl-5">
<h2 id="newsletter_embed_signup">Subscribe to our mailing list</h2>
<h3 id="newsletter_embed_signup">(And get a 10% voucher)</h3>
</div>
</div>
</div>
</div>
</div>
</div>
Looking closely at the HTML structure, you'll notice that both <h2> and <h3> elements are assigned unique classes and IDs. In the CSS file, the style rule
.newsletter .newsletter_title h2::before