Home / Questions / 100336
Accepted
zerokira
Asked: 2020-09-07 06:59:32 +0800 CST 2020-09-07 06:59:32 +0800 CST

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

  • 772

Greetings, I am trying to center the arrow that I make with the pseudo-elements :Beforeand :aftercss but I cannot find how to solve my problem, the idea is that the arrow is centered on the divone that contains it and that the arrow does not change position regardless of the number . I remain 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>

html

1 Answers

  1. Best Answer

    It quickly occurs to me that it would be a very good option to use calc()to vary the position to the left left, taking 50% as a reference and subtracting half the width that the "arrow" occupies. Surely there would be some minor adjustments pending, but the idea is embodied 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>

    • 4