adplus-dvertising

::after pseudoelements suddenly stopped displaying in firefox. Works in chrome

Asked 3 months ago
Viewed 9 times

I have an accordion menu that was displaying the ::after psuedoelements just fine in firefox until very recently. It still works in chrome. Can't for the life of me figure out why they just disappeared like that in firefox.

The ::after elements displayed just fine a couple of days ago but now all of a sudden they have decided to stop working.

Any assistance that can help would be greatly appreciated.

const accordionItemHeader = document.querySelectorAll(".accordionItemHeader");

accordionItemHeader.forEach(accordionItemHeader => {
  
  accordionItemHeader.addEventListener("click", event => {
    accordionItemHeader.classList.toggle("active");
  
    const accordionItemBody = accordionItemHeader.nextElementSibling;

    if (accordionItemHeader.classList.contains("active")) {    
      accordionItemBody.style.maxHeight = accordionItemBody.scrollHeight + "px";  
    } else {
      accordionItemBody.style.maxHeight = 0;
    }
  });
});
.accordion {
    border-bottom: 2px solid white;
  }
  
  .accordionItemHeader {
    cursor: pointer;
    position: relative;
    color: white;
    display: flex;
    align-items: center;
    background-color: black;
    font-size: 2rem;
  }

  .accordionItemHeader::after, .accordionItemHeader.active::after {
    font-size: 3.5rem;
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%; 
    padding: 0 10px;
  }

  .accordionItemHeader::after {
    content: "\002B" / "expand question";
  }

  .accordionItemHeader.active::after {
    content: "\002D"/ "collapse question";   
  }
  
  .accordionContent {
    padding: 10px;
    color: black;
    font-size: 2rem;
    border: 2px solid black;
  }

  .accordionItemBody {
    max-height: 0;
    overflow: hidden;
    padding: 0;
    transition: max-height 0.5s ease-out;
  }
}
<div class="accordion">
            <div class="accordionItem">
              <div class="accordionItemHeader">
                <h4>TEXT</h4>
              </div>
              <div class="accordionItemBody">
                <div class="accordionContent">
                  <p>dfafaf adfafdafadfadfafafdafaf
                </p>
                </div><!--accordionContent div end -->
              </div> <!--accordionitembody div end-->
            </div><!--accordionItem div end-->
          </div><!--accordion div end-->

asked 3 months ago

Correct Answer

Found the problem. The alt text in the pseudo elements was what was causing the issue for firefox.

answered 3 months ago