CSS position: absolute doesn't display correctly on Amazon Fire tablet

Question

I have a Joomla 3.9x website with a custom responsive menu. Each menu item in the top level has a pseudo ::before element displaying icons from a custom font. If the item is a menu separator, then the separator (enclosed in a span) is followed by a button which has its own ::after element displaying either + or - depending on whether the hidden menu is displayed or not. On Windows 10, iPad and Android, these button ::after elements are correctly lined up. On Amazon Fire (v8, 10th Gen) the symbols are too high. I have no idea if there's any way to inspect the page on Fire tablets. Here are a couple of screenshots and I'll give some of the html and css below them.

This is as on Windows 10:

This is Amazon Fire Tablet:

<ul class="menu-b">
    <li class="item-129 single divider deeper parent">
        <span class="separator icon-life-events">
         ::before
         Life Events
        </span>
        <button class="btn-level-1" type="button" aria-label="Life Events">
         ::after
        </button>
    </li>
</ul>

This is the CSS:

.menu-b {
  display: -webkit-flex;
  flex-direction: column;
  justify-content: normal;
  margin: 0 0 1rem;
  padding: 0;
  position: relative;
  top: 0;
  overflow-y: auto;
}
.li {
  display: block;
  position: relative;
  line-height: 1.5;
  border-top: 1px dotted darkgray;
  margin: 0;
  padding: 0.5rem 0 0;
}
.li span {
  color: darkgreen;
  display: inline-block;
  font-size: 1.1rem;
  padding: 1rem 0;
  position: relative;
  text-decoration: none;
  white-space: nowrap;
}
[class*=" icon-"]::before {
  font-family: 'myfont';
  font-size: 1.5rem;
  position: relative;
  top: 0.35rem;
  left: -0.5rem;
  }
}
button {
  position: relative;
  background: transparent;
  border: none;
  display: inline-block;
  height: 2.5rem;
  margin-left: 0.5rem;
  outline: none;
  padding: 0.75rem 0 1rem;
  top: -0.25rem;
  width: 20px;
}
button::after {
  display: inline-block;
  width: 0;
  height: 0;
  margin: 0;
  content: "+";
  color: darkgreen;
  font-size: 1.35rem;
  transition: all .3s ease-out;
  position: absolute;
  left: 0;
  top: 0;
}

I have tried different heights, padding, margins on different elements but it just doesn't want to display as I want it on Amazon Fire.

Any suggestions gratefully received.

Answer 1

After more experimenting, I have fixed it.

I combined the span and button elements into one so the html now looks like this:

<ul class="menu-b">
    <li class="item-129 single divider deeper parent">
        <div class="separator btn-level-1 icon-life-events" type="button" aria-label="Life Events">
         ::before
         Life Events
     ::after
        </div>
    </li>
</ul>

I had to adjust the CSS, but the main CSS change is that the pseudo ::after element has the class position: relative; instead of position: absolute;