::在firefox中的伪元素突然停止显示之后.适用于镀铬



我有一个手风琴菜单,直到最近,它还在firefox中显示:after-psuedoelements。它仍然适用于铬。我一辈子都想不出它们为什么会像萤火虫一样消失。

::元素几天前显示得还不错,但现在突然之间,他们决定停止工作。

如有任何帮助,我们将不胜感激。

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: "02B" / "expand question";
}
.accordionItemHeader.active::after {
content: "02D"/ "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-->

发现问题。伪元素中的alt文本是导致firefox出现问题的原因。

最新更新