Why does content wrap after transition?

Issue

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 class="ul-title">Popular Tags</li>
    <li class="tag">♀</li>
    <li class="tag">🐶</li>
    <li class="tag">🐮</li>
    <li class="tag">🎵</li>
  </ul>
</header>

Solution

Actually, none of the characters has the desired box. Although the aspect ratio is set to 1 they are not square.

There is no explicit height set.

It depends on exactly what effect you require, for example if different icons with different characteristics are added, but this snippet simply sets a height of 1.5em to the list and makes sure each character is centred by setting li elements to flex.

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;
  height: 1.5em;
}

.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;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

<header>
  <ul>
    <li class="ul-title">Popular Tags</li>
    <li class="tag">♀</li>
    <li class="tag">🐶</li>
    <li class="tag">🐮</li>
    <li class="tag">🎵</li>
  </ul>
</header>

Answered By - A Haworth