如何使:after伪元素在overflow-y滚动容器外正常渲染？

问题核心：当容器设置overflow-y: scroll时，浏览器会强制将overflow-x设为auto（即使显式声明overflow-x: visible也无法覆盖），导致水平方向超出容器范围的内容被裁剪，这就是你原来的伪元素无法显示的原因。

解决方案思路 #

通过拆分容器职责：外层.wrapper仅负责固定宽度和边框，不设置overflow属性；内部新增一个.scroll-inner容器，专门承担垂直滚动功能。这样外层容器不会裁剪超出水平范围的内容，伪元素就能正常显示在容器外部。

修改后的代码 #

HTML

<div class="wrapper">
  <div class="scroll-inner">
    <p class="item" data-text="tag-1">
      item1
    </p>
    <p class="item" data-text="tag-2">
      item2
    </p>
    <p class="item" data-text="tag-3">
      item3
    </p>
  </div>
</div>

CSS

.wrapper {
  width: 10rem;
  border: 1px solid red;
  font-size: 2.5rem;
  /* 移除overflow配置，让容器不裁剪超出内容 */
}

.scroll-inner {
  height: 5rem;
  padding: 1rem;
  overflow-y: scroll;
  /* 仅内部容器负责垂直滚动 */
}

.item {
  position: relative;
  font-size: 2rem;
}

.item::before {
  content: "#";
}

.item::after {
  content: attr(data-text);
  position: absolute;
  top: 50%;
  left: calc(100% + 1rem); /* 定位到元素右侧，保留1rem间距 */
  padding: 0.5rem 1rem;
  transform: translateY(-50%);
  font-size: 1rem;
  color: white;
  background-color: black;
  border-radius: 500px;
  cursor: pointer;
  opacity: 0; /* 默认隐藏标签 */
  transition: opacity 0.2s ease; /* 加入过渡动画 */
}

.item:hover::after {
  opacity: 1; /* hover时显示标签 */
}

关键细节说明 #

• 外层.wrapper保持固定宽度，确保和同级元素对齐，同时不设置overflow，避免裁剪伪元素。
• 内部.scroll-inner继承原来的高度、内边距和滚动配置，保证列表的垂直滚动功能正常。
• 使用calc(100% + 1rem)定位伪元素，既保证标签在元素右侧，又避免和容器边框紧贴，提升视觉效果。
• 用opacity实现显示/隐藏过渡，比display属性更流畅，不会出现突兀的布局变化。

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