如何在hover时让<li>脱离文档流且保持原有位置？

解决方案思路 #

不用修改

• 给
• 设置position: relative，作为伪元素的定位容器
• 悬停时生成伪元素，通过绝对定位覆盖在原
• 上方，继承原文本内容并放大，同时提高z-index确保置于顶层
• 原
• 保持文档流中的占位，避免影响其他元素布局

修改后的完整代码 #

HTML（给

添加data-text属性用于伪元素获取文本）

<nav>
  <h3>Writings</h3>
  <div>
    <ul class="nav-links">
      <li data-text="Categories">Categories</li>
      <li data-text="Articles">Articles</li>
      <li data-text="About">About</li>
    </ul>
  </div>
</nav>

CSS

nav {
  display: flex;
  justify-content: space-between;
  margin: 2rem 10px;
  align-items: center;
  padding: 0 5vw;
}

nav div ul {
  list-style: none;
  display: inline-block;
}

nav div ul li {
  display: inline-block;
  margin: 0.2rem;
  font-size: 0.95rem;
  cursor: pointer;
  position: relative; /* 作为伪元素的定位父容器 */
}

nav div ul li:hover::before {
  content: attr(data-text); /* 从data-text获取文本内容 */
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1.2rem; /* 放大文本 */
  z-index: 10; /* 置于顶层 */
  background-color: white; /* 可选：避免与下方内容重叠，根据页面背景调整 */
  white-space: nowrap; /* 防止文本换行 */
}

@media(max-width:500px) {
  nav {
    margin: 10px 0;
  }
}

代码说明 #

1. 原
2. 的作用：保持inline-block属性，在文档流中占据原有位置，确保其他元素布局不受影响
3. 伪元素定位：通过position: absolute相对于父元素
4. 定位，top:0; left:0确保伪元素完全覆盖原
5. 的位置，不会偏移
6. 文本放大与层级：设置更大的font-size，通过z-index:10让放大后的文本置于其他元素上方
7. 可选优化：添加background-color可以避免放大后的文本与下方内容重叠，white-space: nowrap防止文本因放大而换行

为什么之前的方法失效？ #

直接给

内容的提问来源于stack exchange，提问作者Durkshaw