Special Heading code hack

Hello!

I am trying to figure out how to use the code provided in the support here:

 /*----------------------------------------
// CSS - HEADING WITH LINES ON THE SIDES
//--------------------------------------*/

#top  .av-special-heading {
	 /* font-weight: 900; */
	 color:#1769ff;
	 margin-top: 30px;
}

#top   .av-special-heading-tag {
	 display: inline-block!important;
	 position: relative;
}

#top  .av-subheading {
	 margin: 15px 0 0 0;
}

 .page-id-501 .av-special-heading-tag::before,  .page-id-501 .av-special-heading-tag::after {
	 content: '';
	 position: absolute;
	 top: 50%;
	 transform : translateY(-50%);
	 border-top: 1px solid currentcolor;
	 width: 30px;
	 color: #333;
}

.page-id-501   .av-special-heading-tag::before {
 left: -24%;
}
.page-id-501   .av-special-heading-tag::after {
 right: -24%;
} 

I added the heading with lines at side code and it is working well… I was able to make it only effect the special headers on this specific page by using the .page-id-501 class in my selectors.

However, I am stuck with tryin got figure out how to hide the dashes on a specific special header (the title of the page). I gave the title a class by using this as the heading text: <span class=”products-title”>Products</span>
I also gave the the color section that this heading is in an id as well. What I want to do is something along the lines of

.products-title::after {
display:none;
}
.products-title::before {
display:none;
}

But when I do this it hides all of the special header lines… any tips on how to select these pseudo classes for just one specific spcial header element?

Attached is the page I am talking about. Thanks!