为什么添加溢出隐藏 :after 以及如何修复它？

Question

向工具提示添加 overflow-属性时，:after 元素消失。为什么？有修复吗？

CSS:

.tooltip:after {
    border: 4px solid white;
    box-shadow: 1px -1px 0px 0px black;

    content: "";
    position: absolute;
    width: 0; height: 0;

    -webkit-transform-origin: 0 0;
       -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;

    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
.tooltip {
    position: fixed;
    border: 1px solid black;
    overflow-y: scroll;
    width: 500px;
}

HTML:

<br>
<br>
<div class="tooltip">Without scroll</div>
<br>
<br>
<div class="tooltip scroll">With scroll</div>

这是一个fiddle:

http://jsfiddle.net/tcbdjg86/5/

Answer 1

因为 css 中的 :after 实际上在它的父元素之外，所以溢出会用任何剪切内容的值隐藏它

为了让 :after 与元素的边缘重叠并实现指针效果，它必须突破其父级的边界，这是由 [=12= 控制的]（溢出仍然隐藏在滚动中）。

它似乎完全消失了，因为它的设计使其在父级内部的位不可见。看到这个 jsfiddle edit that demonstrates this

您可以在 chrome 检查器中看到它仍然存在 - 打开 div 并找到后面的内容，您可以将鼠标悬停在它上面并看到它在那里，突出显示。

Answer 2

发生这种情况的原因是溢出实际上仍然隐藏在 overflow: scroll 属性中。我能想到的唯一解决方法是嵌套滚动 div:

.tooltip::after {
    border: 4px solid white;
    box-shadow: 1px -1px 0px 0px black;

    content: "";
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -11px;
    width: 0px; height: 0px;

    -webkit-transform-origin: 0 0;
       -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;

    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
.tooltip {
    background: white;
    position: fixed;
    border: 1px solid black;
    width: 500px;
}
.scroll > * {
    overflow-y: scroll;
}

<br>
<br>
<div class="tooltip">
    <div>Without scroll</div>
</div>
<br>
<br>
<div class="tooltip scroll">
    <div>With scroll</div>
</div>

为什么添加溢出隐藏 :after 以及如何修复它？

Why does adding overflow hide :after and how to fix it?

html

css

overflow

pseudo-class