私の要素の一番下に:: beforeセレクタを使うには？

Question

私は例の画像のように私のdivボックス（底面のセレクタの前に私の::を使用したいと思います。::のようなものは、セレクタの下に存在する場合、私は不思議でしたか？

.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/

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

に残っていません。 ::afterがあります。 あなたの質問の文脈では問題ではありません。 triangle downシェイプを使用するにはborder任意の要素（または擬似要素）のCSSプロバティ。その後、1位。あなたの場合：

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

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