设置overflow-x:auto后pre元素的::before伪元素被隐藏的问题

你遇到的问题是CSS规范的强制行为：当元素的任意一个overflow方向设置为scroll/auto/hidden时，浏览器会自动把另一个方向的overflow: visible重置为auto。这就导致pre容器把超出自身范围的伪元素（设置了top: -15px）给裁剪掉了。

下面是两种可行的解决办法：

方案一：外层容器承载伪元素 #

把pre的position: relative转移到外层容器上，让伪元素挂载在外层容器，这样pre的overflow就不会影响图标显示：

修改后的HTML结构 #

<div class="markdown-body">
  <div class="code-block-wrapper">
    <div class="remark-code-title">callbacks.js</div>
    <pre class="language-js"><code class="language-js">// 你的代码内容...</code></pre>
  </div>
</div>

调整后的CSS #

/* 新增外层容器样式 */
.code-block-wrapper {
  position: relative;
  margin: 0;
}

/* 伪元素挂载到外层容器 */
.code-block-wrapper pre.language-js::before {
  background: url("https://riverscode.vercel.app/assets/javascript.png");
  background-size: cover;
  position: absolute;
  content: "";
  width: 32px;
  height: 32px;
  border-radius: 0;
  top: -15px;
  left: 10px;
}

.markdown-body pre {
  margin: 0;
  /* 移除position: relative */
  padding: 16px;
  word-break: break-all;
  font-size: 85%;
  line-height: 1.45;
  background-color: #161b22;
  color: red;
  overflow-x: scroll;
  overflow-y: visible;
}

方案二：调整内边距让图标留在容器内 #

给pre增加顶部内边距，把伪元素移到容器的内边距区域，这样即使overflow生效，图标也不会被裁剪：

修改后的CSS #

pre.language-js::before {
  background: url("https://riverscode.vercel.app/assets/javascript.png");
  background-size: cover;
  position: absolute;
  content: "";
  width: 32px;
  height: 32px;
  border-radius: 0;
  top: 8px; /* 移到pre的内边距里 */
  left: 10px;
}

.markdown-body pre {
  margin: 0;
  position: relative;
  padding-top: 40px; /* 留出图标的空间 */
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 16px;
  word-break: break-all;
  font-size: 85%;
  line-height: 1.45;
  background-color: #161b22;
  color: red;
  overflow-x: scroll;
  overflow-y: visible;
}

两种方案各有优劣：方案一不改变原有布局的内边距，更灵活；方案二改动最小，适合不想调整HTML结构的场景。

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