I did my best to strip down my problem into a mwe.

The issue is happening where I have an ascii character for male (♂) which is behaving differently than the emojis. This problem only happens with ascii character. The container is supposed to have 100% the height of the header, and maintain an aspect-ratio of 1. It does not do this on the first render. However, there is a transform to the .ul-title element and when it reverts after transforming on hover, the following element seems to have the height re-calculated and the width adjusted. However, because of this, the width of .ul-title which was set to max-content is changed or something and the content ends up wrapping.

I want to have the animation effect, and not wrap the text. I want to have the .tag elements all be square. I have considered using javascript to hard set the values for width and height, but I feel like there should have been a css fix. Any pointers are appreciated

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header ul {
  margin: 0;
  padding: 0;
  list-style: none;

  display: flex;
  align-items: center;

  gap: 1rem;
}

.ul-title {
  position: relative;
  transition: transform 1s;
  width: max-content;
}

.ul-title:hover {
  transform: translate(3px, 0);
}

.ul-title::before,
.ul-title::after {
  content: "";
  position: absolute;
  top: 0;
  background: blue;
  height: 1px;
  transition: transform 1s;
}

.ul-title::before {
  width: 100%;
  left: 0;
}

.ul-title::after {
  width: 10%;
  right: 0;
  transform: rotate(30deg);
  transform-origin: right;
}

header li.tag {
  box-shadow: 0 0 1px 0 black;
  height: 100%;
  aspect-ratio: 1;
}

<header>
  <ul>
    <li >Popular Tags</li>
    <li >♀</li>
    <li >