CSSでoverflow-x: scrollをつけたらbefore擬似クラスがが消える

Question

preとcodeでプログラムのコードを表示しているのですが、スマホで確認したらテキストがはみ出していたので overflow-x: scroll をつけました。

するとスクロールできるようになり文字がはみ出さなくなったのはいいのですが、元々preにつけていた:beforeの部分が丸々非表示になってしまいました。

元の表示

overflow-x付与後

pre.wp-block-code {
  position: relative;
  background: #f3f6fb;
  margin: 54px 0 30px;
  padding: 30px;
  overflow-x: scroll;  // これをつけると以下のbefore擬似クラスが効かなくなります。

  &:before {
    background: #6cb6ff;
    content: 'コード';
    position: absolute;
    width: 100px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    top: -24px;
    left: 0;
    border-radius: 10px 10px 0 0;
    color: #fff;
    letter-spacing: 0.2em;
    font-weight: bold;
  }
}

調べても全く検討がつかず、何が原因かわからなかったのですが原因をご存知の方がいたらアドバイスいただけませんでしょうか...どうぞよろしくお願いいたします。

Answer 1

:before は pre の子供ボックスなのに pre のボックスより上にはみ出して配置されていたわけですね。
overflow-x: scroll を指定すると、overflow-y は強制的に auto 扱いとなり、はみ出た要素はクリッピングされます。

https://developer.mozilla.org/ja/docs/Web/CSS/overflow

一方の軸をvisible (既定値) に設定して、もう一方を他の値に設定すると、 visible は auto として動作する結果になります。

同じ見た目を実現するなら、

• :before を overflow-x: scroll を付ける要素の外に配置する
• :before を position: fixed にして、pre のパディング領域に置いて、pre の要素は linear-gradient で上部に空白を配置する

などでしょうか。

Comments

[Khy]

ご回答ありがとうございます！
1つ目の方法はHTMLの構造的に難しかったので、2つ目の方法で実装し解決いたしました。

大変助かりました！ありがとうございます！