html - 如何在元素底部使用::before 选择器？

Question

我想在我的 div 框底部使用我的::before 选择器(就像在示例图像中一样。我想知道是否有类似::under 选择器的东西？

.direct-chat-text {
    border-radius: 5px;
    position: relative;
    padding: 5px 10px;
    background: #d2d6de;
    border: 1px solid #d2d6de;
    margin: 0px 150px 0 50px;
    color: #444444;
}



.direct-chat-text::before {
    position: absolute;
    right: 100%;
    top: 15px;
    border: solid transparent;
        border-top-width: medium;
        border-right-width: medium;
        border-bottom-width: medium;
        border-left-width: medium;
        border-right-color: transparent;
    border-right-color: #d2d6de;
    content: ' ';
    height: 0;
    width: 0;
    pointer-events: none;
    border-width: 6px;
    margin-top: -6px;
}

<div class="direct-chat-text">3</div>

Answer 1

.direct-chat-text {
    border-radius: 5px;
    position: relative;
    padding: 5px 10px;
    background: #d2d6de;
    border: 1px solid #d2d6de;
    margin: 0px 150px 0 50px;
    color: #444444;
}

.direct-chat-text::before {
    position: absolute;
    right: 10px;
    top: 100%;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #d2d6de;
    content: '';
    pointer-events: none;
}

<div class="direct-chat-text">3</div>

引用(css 形状):https://css-tricks.com/examples/ShapesOfCSS/