使用::after与相对定位时列表高度异常变化的解决方法求助

嘿，我完全懂你遇到的这个糟心问题——用相对定位的伪元素确实会挤占文档流空间，导致hover时列表项突然“长高”，破坏整个布局的连贯性。这里有个简洁高效的解决方案，既能实现你想要的箭头效果，又能彻底避免布局跳动：

核心思路 #

把伪元素改成绝对定位，同时给列表项设置position: relative作为定位参考容器。这样伪元素会完全脱离文档流，不会影响列表项的高度；再用transform: translateX(-50%)实现水平居中，比手动计算margin更灵活，而且代码只需写一次，一点都不繁琐！

修改后的完整代码 #

CSS 部分

.liste--horizontal { 
  list-style: none; 
  display: flex; 
  justify-content: space-between; 
  color: black; 
} 

.portfolio_selection { 
  background-color: rgb(223, 222, 222); 
  padding: 0; 
  margin-top: 4%; 
} 

.portfolio_selection_critere { 
  padding: 10px; 
  position: relative; /* 设置为伪元素的定位参考容器 */
  cursor: pointer; /* 添加上手型指针，提升交互体验 */
} 

.portfolio_selection_critere:hover { 
  color: #fff; 
  background-color: #3491b2; 
  box-shadow: 0 3px 0 #277088; 
} 

.portfolio_selection_critere:hover::after { 
  content: ""; 
  position: absolute; /* 脱离文档流，不再影响列表项高度 */
  bottom: -10px; /* 定位到列表项底部下方，刚好衔接hover时的阴影 */
  left: 50%; 
  transform: translateX(-50%); /* 一键水平居中，无需计算宽度 */
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent; 
  border-right: 10px solid transparent; 
  border-top: 10px solid #277088; 
}

HTML 部分（无需修改）

<ul class="portfolio_selection liste--horizontal"> 
  <li class="portfolio_selection_critere">All works</li> 
  <li class="portfolio_selection_critere">Creative</li> 
  <li class="portfolio_selection_critere">Corporate</li> 
  <li class="portfolio_selection_critere">Portfolio</li> 
</ul>

方案优势说明 #

1. 彻底消除布局跳动：绝对定位的伪元素不占用文档流空间，hover时列表项高度完全不变。
2. 代码复用性高：只需给所有列表项统一设置position: relative，伪元素的定位逻辑对所有项生效，无需重复编写。
3. 居中更可靠：transform: translateX(-50%)不管列表项宽度多少，都能精准让箭头水平居中，比margin: auto适配性更强。
4. 视觉衔接更自然：箭头定位在bottom: -10px，刚好和hover时的阴影衔接，整体视觉效果更统一。

如果需要调整箭头的位置，只需要修改bottom的值就行，非常灵活！

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