html元素样式的overflow属性对其before、after伪元素有什么影响

Question

ul列表，有before和after伪元素，实现如下效果：

当列表中的元素增多后，给ul设置了：

max-height:300px;
overflow: auto;

之后，伪元素就显示不出来，如下图所示：

不明白什么原因，还望各位帮忙解惑，谢谢！

JS Bin链接在此。

Answer 1

我想，这个跟overflow:hidden一个道理。
先翻看一下overflow的说明：
https://developer.mozilla.org...

再看看before的说明
https://developer.mozilla.org...

/* 内容会被修剪，并且其余内容不可见 */
overflow: hidden;

/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */
overflow: scroll;

::before 会为当前元素创建一个子元素作为伪元素。常通过 content 属性来为一个元素添加修饰性的内容。 此元素默认为行内元素。

因为scroll使得ul的内容被裁剪了，于是作为子元素的before和after，也就被裁剪了。

不知道这样解释是否可以接受？ 有理解不妥的请指正~

Answer 2

before, after 伪元素相当于子元素，overflow 不为visible 时子元素当然显示不出来。
可以考虑增加一层包裹用于滚动。