Как выровнять псевдоэлемент?

Question

[Rem36]

День добрый, подскажите плез как отцентрировать псевдоэлемент относительно родителя? Родитель меньше псевдоэлемента, left 50% не то.

<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;
}

Comments

[Ankhena]

Начните с того, что содержимое тултипа это не украшение сайта, а содержимое.
Т.е. должно быть в разметке, а не в стилях.

С примерно такой структурой

<div class="tooltip">
  <button class="tooltip__btn" type="button" aria-label="Подробности"></button>
  <div class="tooltip__text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, deserunt, distinctio dolorum eaque eius eveniet ipsam mollitia nostrum pariatur quibusdam quisquam quo quod reprehenderit velit voluptas? Magnam sequi totam voluptate!
  </div>
</div>

https://gist.github.com/Ankhena/ada4232ccaf70c7df0...

Выравнивание абсолютов по центру делается так:

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

Это было для горизонтального выравнивания. Для вертикального аналогично.

[Rem36]

Ankhena, Спасибо!

Answer 1

[Айрат]

Попробуй так отцентровать

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

Comments

[Rem36]

Спасибо!

[Айрат]

Rem36 Пожалуйста! всегда рад

Answer 2

[Дмитрий Гоголенко]

Выбирай

Comments

[Rem36]

Спасибо!

[Дмитрий Гоголенко]

Rem36, выбери ответом на твой вопрос