overflow-x:auto容器中::after伪元素溢出显示问题求助

问题根源 #

CSS规范明确规定：当容器的overflow-x设置为非visible的值（比如auto）时，overflow-y的visible会被浏览器自动重置为auto。这就是你设置overflow-y: visible却无效的原因——浏览器根本不会采纳这个值，而是强制使用auto，导致纵向溢出的伪元素被裁剪。

可行解决方案 #

方案1：给容器添加顶部内边距抵消裁剪 #

通过给容器设置足够的padding-top来容纳伪元素，同时用负margin-top抵消内边距对整体布局的影响，这样既保留overflow-x:auto，又能让伪元素正常显示：

.container {
    overflow-x: auto;
    padding-top: 15px; /* 数值大于伪元素的top偏移量（比如这里的10px） */
    margin-top: -15px; /* 抵消padding-top带来的布局偏移 */
}

.content {
    border: 1px solid #f00;
    position: relative;
}
.content::after {
    content: "X";
    border: 1px solid #00f;
    position: absolute;
    top: -10px;
    right: 0; /* 补充右定位，让叉号在右上角 */
}

方案2：将伪元素转移到容器外的父元素 #

如果不想修改容器的内边距，可以给.content套一层额外的父容器，让伪元素相对于这个外层容器定位，从而脱离原容器的overflow限制：

<div class="container">
  <div class="content-outer">
    <div class="content">Lorem ipsum</div>
  </div>
</div>

.container {
    overflow-x: auto;
}

.content-outer {
    position: relative; /* 作为伪元素的定位基准 */
    margin-top: 10px; /* 给伪元素留出顶部空间 */
}

.content {
    border: 1px solid #f00;
}

.content-outer::after {
    content: "X";
    border: 1px solid #00f;
    position: absolute;
    top: -10px;
    right: 0;
}

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