fibosearch and using ::before in css

Also, to clarify, as I realized I am not giving the full picture here. I am applying the #search-circle id via js to the fibosearch icon in my functions.php. What I actually did was create a svg circle that I then placed behind the icon and then append the icon in to the svg circle.

add_action( 'wp_footer', 'search_icon_append');

function search_icon_append (){
    

?>
    <script>
    
    document.addEventListener("DOMContentLoaded", function(event) {
        
    var cir2 = document.getElementById("account-circle");
    var cir2_clone = cir2.cloneNode(true);
    var icon = document.getElementsByClassName('dgwt-wcas-ico-magnifier')[0];
    document.getElementsByClassName("site-search")[0].appendChild(cir2_clone);
    cir2_clone.id = "search-circle";
    
    icon.setAttribute("viewBox", "0 0 100 100");
    icon.setAttribute("x", "12.5px");
    icon.setAttribute("y", "12.5px");

	var fragment = document.createDocumentFragment();
	
	fragment.appendChild(icon);

	cir2_clone.appendChild(fragment);

    });
    
    
    </script>

    <?php
    
}

I then apply the class to the svg circle when my cart is not triggered. I can scrap the scripts and just use the standard icon but still looking to understand how fibosearch hides the before and after pseudo.

/*********** Show Overlay On Search Icon Click ************/

add_action( 'wp_footer', 'search_icon_overlay');

function search_icon_overlay (){
    
     ?>
	
        <script>

        document.addEventListener("click", function(event) {
            
            var form = document.getElementsByClassName("dgwt-wcas-search-form")[0];
            var searchBox = document.getElementsByClassName("dgwt-wcas-search-input")[0];
            var prime = document.getElementsByClassName('storefront-primary-navigation')[0];
            
            var cartIcon = document.getElementsByClassName("vi-wcaio-sidebar-cart-icon-wrap")[0];
            var head = document.getElementById("masthead");
            var body = document.getElementsByTagName("body")[0];

            var target = event.target.className;
            var overlay = document.getElementsByClassName("vi-wcaio-sidebar-cart-overlay")[0];
            var triggered = false;
            if (overlay.className == "vi-wcaio-sidebar-cart-overlay") {
                triggered = true;
            }
            else {
                triggered = false;
            }
            
            if(target == "vi-wcaio-sidebar-cart-overlay" && triggered || target == "search-circle" && triggered) {
                 overlay.className = "vi-wcaio-sidebar-cart-overlay vi-wcaio-disabled";
                 
                prime.style.display = "block"; 
                form.style.display = "none"; 
                cartIcon.classList.remove("site-search-on-click-others");
                searchIcon.classList.remove('site-search-on-click');
                head.classList.remove("site-search-on-click-head");
                body.classList.remove("site-search-lock-scroll");

                
            }

            else if (target == "[object SVGAnimatedString]") {

                overlay.className = "vi-wcaio-sidebar-cart-overlay";
                
                
                prime.style.display = "none";
                form.style.display = "block";
                cartIcon.classList.add("site-search-on-click-others");
                searchBox.classList.add("site-search-on-click-box");
                head.classList.add("site-search-on-click-head");
                head.classList.add("scrolled");
                body.classList.add("site-search-lock-scroll");

            }
        });
        
        </script>
    <?php
}