CODEWITHSUNDEEP
htmlcss
peace_love
peace_love

Reputation: 6461

How can I use a ::before selector at the bottom of my element?

I would like to use my ::before selector on the bottom of my div box (like in the example image. I was wondering if there is something like an ::under selector?

enter image description here

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

Upvotes: 0

Views: 199

Answers (3)

Alexander
Alexander

Reputation: 4527

There is no ::under pseudo element. There is the ::after. But it does not matter in the context of your question. To make triangle down shape use border CSS proberty of any element (or pseudo element). Then postion one. In your case:

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

Upvotes: 0

Yudi Chang
Yudi Chang

Reputation: 448

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

Reference (css shape) : https://css-tricks.com/examples/ShapesOfCSS/

Upvotes: 3

Cyril Beeckman
Cyril Beeckman

Reputation: 1278

You can try something like this, change left to right and other improvements

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

Upvotes: 1

Related Questions