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

Question

我想在div框的底部使用my :: 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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

参考（css形状）：https://css-tricks.com/examples/ShapesOfCSS/

Answer 2

你可以尝试这样的事情，从左到右改变和其他改进

.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: 10%;
    top: 100%;
    border-top: 6px solid #d2d6de;
    border-right: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid transparent;
    content: ' ';
    height: 0;
    width: 0;
    pointer-events: none;
}

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

Answer 3

没有:: under伪元素。有::after。 但是在你的问题的背景下并不重要。使triangle down形状使用border任何元素（或伪元素）的CSS探测。然后定位一个。在你的情况下：

＆＃13;

＆＃13;

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

.with-under::before {
    position: absolute;
    bottom: -12px;
    left: 95%;
    margin-left: -6px;
    border: 6px solid transparent;
    border-top: 6px solid #d2d6de;
    content: ' ';
    height: 0;
    width: 0;
    pointer-events: none;
}

＆＃13;

<div class="with-under">3</div>

＆＃13;

＆＃13;

＆＃13;