@GioCura
Posted
Hi! 👋 To add the little arrow under your modal/tooltip, you have to add a ::before
or ::after
pseudo-element to your "compartilhamento" div
.
Go, to your style.css
and write something like this:
compartilhamento::after {
content: "";
border: 1.2rem solid;
border-color: hsl(217, 19%, 35%) transparent transparent transparent;
position: absolute;
top: 100%;
left: 50%;
}
Here, the arrow is made by setting border-color
to have only one side with a color, and the rest being transparent
. You can adjust the size of the arrow by changing it's width in the border
attribute. You can adjust the position by changing the top
and left
values.
Hope this helps!
Marked as helpful