How to align a pseudo element?

Question

css

Good afternoon, please tell me how to center the pseudo-element relative to the parent? The parent is smaller than the pseudo-element, left 50% is wrong.

<span class="tulltip"></span>

.tulltip{
    background-image: url('../img/projects/tultip.svg');
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    display: inline-block;
    position: relative;
    cursor: pointer;
}

.tulltip::before{
    content: 'Пример современных тенденций - современная методология разработки ';
    width: 265px;
    display: inline-block;
    background-color: var(--color-violet-content-text-bg);
    color: var(--color-white);
    font-size: 12px;
    font-family: var(--ff-os);
    position: absolute;
    top: 0;
    left: 0;
    /* transform: translateY(-50%); */
    visibility: hidden;
    opacity: 0;
}

.tulltip:hover::before{
    opacity: 1;
    visibility: visible;
}

Answer 1

Try to center

left: 50%;
transform: translateX(-50%);

Answer 2

Choose