伪元素后如何获得子宽度？

Question

我正在尝试以这种方式设计链接，将其悬停以更改其颜色并仅在悬停的项目下划线。但要在下划线处显示整个div（父级）。如何避免呢？

ul{
  list-style: none;
  }
ul li{
  display: inline-block;
  }
ul li a {
  text-decoration: none;
  }
  
ul li a::after{
  content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background: #E3263F;
    visibility: hidden;
    border-radius: 1px;
    transform: scaleX(0);
    transition: .25s linear;
    }

ul li a:hover::after{
    color: #E3263F;
    visibility: visible;
    transform: scaleX(1);
    }
    

<div>
  <ul>
    <li><a href="">item1</a></li>
    <li><a href="">item2</a></li>
    <li><a href="">item3</a><li>
  </ul>
</div>