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

Question

我尽力将我的问题分解为一个 mwe。

问题发生在我有一个男性 (♂) 的 ascii 字符，它的行为与表情符号不同。这个问题只发生在 ascii 字符上。容器应该具有 header 的 100% 高度，并保持 aspect-ratio 为 1。它不会在第一次渲染时执行此操作。但是，.ul-title 元素有一个转换，当它在悬停后转换后恢复时，下面的元素似乎调整了高度 re-calculated 和宽度。但是，正因为如此，设置为 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

实际上，none 个字符有所需的框。尽管宽高比设置为 1，但它们不是正方形。

没有明确的高度设置。

这完全取决于您需要什么效果，例如，如果添加具有不同特征的不同图标，但此代码段只是将列表的高度设置为 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>

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

Why does content wrap after transition?

html

css

transform