What can be causing an HTML element to be translucent (CSS)?

Question

I feel like I'm losing my marbles.

I'm adding tooltips to an existing web browser extension via a CSS overlay. The browser happens to be Firefox.

For some reason, the tooltips are displaying as translucent (semi-opaque). Here is everything I've tried, all put together into one CSS ruleset:

#identifier .class:hover::after {
   display: block !important;
   opacity: 1 !important;
   z-index: 2147483647 !important;
   color: rgba(255,255,0,1) !important;
   fill: rgba(0,0,0,1) !important;
   background: rgba(0,255,0,1) !important;
   background-blend-mode: normal !important;
   mix-blend-mode: normal !important;
   transform: none !important;
   content: "Tooltip";
}

Here is an image of what is displayed (the text in the tooltip is flipped because the parent element is subjected to a transform; I would normally just retransform the tooltip in this case, but I wanted to reduce variables while figuring out this issue).