Почему img для :before не работает как надо?

Question

[Danila232]

Мне надо, чтобы расположение было как на 1м скрине. То есть есть две строки текста, обёрнутые в div с классом .name и для этого .name я псевдоэлементом ставлю изображение через бэкграунд.
По началу изображение было вообще наверху, но потом подсказали, что это из-за того,что мой 1й p блочный, поэтому он не пускает картинку к себе. Ну я ему inline-block поставил, и сейчас ситуация как на 3м скрине
Пробовал ставить inline-block и для 2го , много чего пробовал, но что-то не помогло.
Подскажите пожалуйста, что не так(ну и объясните почему оно так работает)
*Знаю, что через скрины здесь код не показывают, но я сейчас не у компухтера.

Comments

[Ankhena]

Это фото реального человека, значит, контент, img, а никакой не псевдо.

Абсолюты тут не нужны вообще.
Помогут флексы, но тогда имя и должность нужно будет обернуть в div.
Либо, ещё лучше, гриды. 2х2
Вообще, поможет даже банальный float :) Только аккуратно. Но лучше гриды.

[Сергей delphinpro]

Ankhena, только на гридах у меня получилось на две строки больше в css =)

<div class="person">
  <img class="person__photo" src="">
  <div class="person__name">Имя фамилия</div>
  <div class="person__position">Должность</div>
</div>

.person {
  display: grid;
  grid-template-columns: 5rem 1fr;
  align-items: center;
  gap: 0.25rem 1rem;
}
.person__photo {
  grid-row: span 2;
  align-self: center;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
}
.person__name {
  align-self: end;
}
.person__position {
  align-self: start;
}

[Ankhena]

Сергей delphinpro, эта строчка align-items: center;, с виду, кажется лишней, если мы каждому пишем self?

А в варианте с флексами можно и грид убрать (хорошая фраза) и заменить на margin, будет еще меньше строк :)
gap мне, конечно, более симпатичен.

Answer 1

[Сергей delphinpro]

Это изображение контентное, а не оформительское. На реальном сайте, его очевидно будут загружать через админку. Его следует ставить через тег img

<div class="person">
  <img class="person__photo" src="">
  <div class="person__wrapper">
    <div class="person__name">Имя фамилия</div>
    <div class="person__position">Должность</div>
  </div>
</div>

.person {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.person__photo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  flex-shrink: 0;
}
.person__wrapper {
  display: grid;
  gap: 0.25rem;
}
.person__name {}
.person__position {}

Answer 2

[Александр Шемаханов]

Добавьте к блоку .name position: relative и отступ от края на ширину аватарки и расстояния до имени. А к псевдоэлементу ::before position: absolute и сместите влево на значения отступа. Таким образом, через свойства top left сможете спозиционировать как вам угодно относительно имени. Пример ниже: