html - 隐藏 :after element of absolute positioned and transformed div element behind it

Question

我试图通过使 的 z-index 隐藏绝对定位的 div.profile-dropdown 元素的 ::after 元素的一部分div.profile-dropdown 为 2，::after 元素的 z-index 更小，1。这是行不通的。任何帮助将不胜感激。

<div class="icon profile" *ngIf="logged_in">
    <i class="fa fa-user-circle"></i>
    <div class="profile-dropdown">
        <div>Profile</div>
        <div>Sign Out</div>
    </div>
</div>

这是 SCSS:

div.profile {
    position: relative;
    .profile-dropdown {
        position: absolute;
        top: 0px;
        left: 15px;
        margin: auto;
        width: 200px;
        background-color: white;
        transform: translate(-50%, 60px);
        border: 1px solid rgb(220, 220, 220);
        z-index: 2;
        &::after {
            position: absolute;
            content: '';
            width: 10px;
            height: 10px;
            border: 1px solid rgb(220,220,220);
            z-index: 1; //z-index = -1 doesn't work either
            top: 0;
            left: 0;
            right: 0;
            margin: auto;
            transform: rotateZ(45deg) translate(-50%, -35%);
        }
    }
}

Answer 1

您是否尝试过 overflow:hidden？