I'm attempting to make a responsive tooltip and have no hardcoded widths or anything on the parent.

This seems pretty straightforward, but I am not able to properly center the after element because of the fact that there is already a transform: translateY(10px) attribute on it.

I'm not able to do the normal left:50%; top:50%; transform: translate(-50%, -50%)' I've seen online because I already have a transform attribute in there.

Is this the location of the problem? Or is there another spot I should be looking?

If anyone has any tips or pointers please let me know!

Also, I hope it's no problem that it's in vue; everything should be handled in the style section anyway.

Cheers!