要使下面的对象变大或变小，可以使用event.currentTarget.offsetWidth

var $blip = $('.blip');

$('#page-nav>a').on('click', function(event){
  console.log(event.currentTarget.offsetWidth);
  $blip.css({
    left: $(this).offset().left 
    - $(this).parent().offset().left,
    width: `${event.currentTarget.offsetWidth}px`,
  });
});

为了补充Flurig的答案，span标签在第一个锚标签内，因此在设置宽度时呈现不正确。请参见下面：

var $blip = $('.blip');

$('#page-nav>a').on('click', function(){
  $blip.css({
    left: $(this).offset().left 
    - $(this).parent().offset().left, 
    width: `${event.currentTarget.offsetWidth}px`
  });
});

a {
  display: inline-block;
  position: relative;

  top: -1px;
  padding: 10px 20px;

  text-align: center;
  line-height: 41px !important;

  color: #c3c3c3;
  text-decoration: none;
  text-shadow: 1px 1px 0px black;
  text-transform: uppercase;

  font-family: "Myriad Pro", "Calibri", sans-serif;
  font-size: 16px;
  letter-spacing: 1px;
  text-align: center;
}

#page-nav {
  height: 100px;
  overflow-y: hidden;
  position: relative;
}

.block {
  display: inline-block;
}

.blip {
  position: absolute;
  background: rgba(100, 100, 255, 0.4);
  width: 0;
  display: inline-block;
  max-width: 100%;
  height: 4rem;
  top: 0%;
  transition: left 0.5s ease-in-out, width 0.5s ease-in-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<nav id="page-nav">
  <span class="blip"></span>
  <a href="#">item #1</a>
  <a href="#">item #2</a>
  <a href="#">item njkkjhoihnikhihi #3</a>
  <!-- etcetera -->
</nav>