When hovering on link tag, add :after class to its parent

Question

I have a banner that includes a ul with various li's including a tags. The below snippet illustrates the behaviour that when the user hovers on the a, an underline is added at the bottom of the banner using :after and a slightly "hacky" specific bottom pixel value.

body {
  margin: 0;
}

.banner {
  height: 150px;
  background-color: lightpink;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul {
  display: flex;
  align-items: center;
  gap: 25px;
}

ul li {
  list-style: none;
}

ul li a {
  position: relative;
  text-decoration: none;
}

ul li a::after {
  position: absolute;
  bottom: -65px;
  left: 0;
  right: 0;
  width: 0%;
  content: '';
  color: transparent;
  background: black;
  height: 3px;
}

ul li a:hover::after,
ul li a:active::after {
  transition: all 0.2s;
  width: 100%;
}

<div class="banner">
  <ul>
    <li><a href="">Option 1</a></li>
    <li><a href="">Option 1</a></li>
    <li><a href="">Option 1</a></li>
  </ul>
</div>

The below is an updated approach, with the attempt to move away from specifying specific bottom values (as the banner will not always be the same height). I've now made the li the full height of its parent element and have tried to add the :after class to the li, so that the need for bottom: -65px for example would not be required.

I'm avoiding leaving it as it is currently and just making the a full height, as this would mean hovering above the a would activate the underlined hover state.

So ideally, the a tag remains its current height (just the height of the text), but when hovered on, the :after styles are added to its parent li. Is this possible?

body {
  margin: 0;
}


.banner {
  height: 150px;
  background-color: lightpink;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 25px;
}

ul li {
  list-style: none;
  display: flex;
  align-items: center;
  height: 100%;
}

ul li a {
  position: relative;
  text-decoration: none;
}

ul li::after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 0%;
  content: '';
  color: transparent;
  background: black;
  height: 3px;
}

ul li:hover::after,
ul li:active::after {
  transition: all 0.2s;
  width: 100%;
}

<div class="banner">
  <ul>
    <li><a href="">Option 1</a></li>
    <li><a href="">Option 1</a></li>
    <li><a href="">Option 1</a></li>
  </ul>
</div>