How to horizontally center an element with translated content outside of it's width

<h3>This is the width <span>extend</span></h3>

h3 {
  width: fit-content;
}
span{
  display:block;
  width: fit-content;
  margin-inline-start: auto;
  translate: 50% 0;
}