Saludos, estoy tratando de centrar la flecha que realizo con los pseudo-elementos :Before
y :after
de css pero no encuentro como resolver mi problema, la idea es que la flecha se centre al div
que lo contiene y que la flecha no cambie de posición sin importar el numero. Quedo atento a cualquier recomendación para realizar este tipo de flechas.
.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>