为什么转换后内容会换行？

Question

我已尽力将我的问题简化为 mwe。

问题发生在我有一个男性 (♂) 的 ascii 字符，其行为与表情符号不同。这个问题只发生在 ascii 字符上。容器应该具有 100% 的标题高度，并保持纵横比为 1。它不会在第一次渲染时执行此操作。但是，.ul-title 元素有一个变换，当它在悬停变换后恢复时，以下元素似乎重新计算了高度并调整了宽度。但是，正因为如此，设置为max-content 的.ul-title 的宽度发生了变化，内容最终被换行。

我想要动画效果，而不是换行。我想让.tag 元素都是方形的。我考虑过使用 javascript 来硬设置宽度和高度的值，但我觉得应该有一个 css 修复。任何指针表示赞赏

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>

Answer 1

实际上，没有一个字符具有所需的框。虽然纵横比设置为 1，但它们不是正方形的。

没有明确的高度设置。

这完全取决于你需要什么效果，例如是否添加了具有不同特征的不同图标，但是这个 sn-p 只是将高度设置为 1.5em 到列表中，并通过将 li 元素设置为来确保每个字符居中弯曲。

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>