problem with Pseudo-elements :: before and :: after in css

Question

problem with Pseudo-elements :: before and :: after in css

Navigation

#1 by (4 votes)

4

Greetings, I am trying to center the arrow I make with the pseudo-elements :Before and :after of css but I can not find how to solve my problem, the idea is that the arrow will focus on div that contains it and that the arrow does not change position regardless of the number. I am attentive to any recommendation to make this type of arrows.

.container1 {
    color: #727176;
    background-color: #fff;
    position: absolute;
    padding: 6px;
    font-style: normal;
    font-weight: bold;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
    cursor: pointer;
}

.container1::before {
    content: "";
    position: absolute;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
    width: 19px;
    height: 19px;
    left: 26px;
    top: 19px;
    z-index: -1;
    transform: rotate(45deg);
    cursor: pointer;
}

.container1::after {
    content: "";
    top: 30px;
    left: 24px;
    position: absolute;
    height: 20px;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 12px solid white;
    cursor: pointer;
}

<div class="container1" style="top: 60px;">
    <span>$990,000,000,000</span>
</div>
<div class="container1">
    <span>$990,000</span>
</div>

html5 html css3 css sass

asked by zerokira 06.09.2017 в 16:59

source

1 answer

How to handle PHP file paths Prevent a PHP file from being called directly from the browser

score 4 · Accepted Answer

It quickly occurred to me that it would be a very good option to use calc() to vary the position to the left left , taking as a reference 50% and subtracting half the width of the "arrow". Surely some minor adjustments would be pending, but the idea is reflected below:

.container1 {
    color: #727176;
    background-color: #fff;
    position: absolute;
    padding: 6px;
    font-style: normal;
    font-weight: bold;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
    cursor: pointer;
}

.container1::before {
    content: "";
    position: absolute;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
    width: 19px;
    height: 19px;
    left: calc(50% - 10px);
    top: 19px;
    z-index: -1;
    transform: rotate(45deg);
    cursor: pointer;
}

.container1::after {
    content: "";
    top: 30px;
    left: calc(50% - 11px);
    position: absolute;
    height: 20px;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 12px solid white;
    cursor: pointer;
}

<div class="container1" style="top: 60px;">
    <span>$990,000,000,000</span>
</div>
<div class="container1">
    <span>$990,000</span>
</div>