Почему свойство img для псевдоэлемента :before не работает правильно?

Question

Гоар

css , html

Почему свойство img для псевдоэлемента :before не работает правильно?

Каким способом можно достичь расположения, аналогичного первому скриншоту, с двумя строками текста, обёрнутыми в div-контейнер с классом .name, и при этом установить изображение через псевдоэлемент background для этого .name? Я пробовал использовать inline-block для первого .name, чтобы изображение отображалось в правильном месте, но по-прежнему неправильно отображается. Что я делаю не так и почему это происходит?

8 ноября 2023 г. 7:39

Ответы на вопрос 2

Похожие вопросы

Answer 1

Скорее всего, проблема заключается в том, что псевдоэлементы, такие как :before, не могут содержать тег img, так как они не являются частью DOM дерева страницы и не поддерживают этот тег.

Однако, можно использовать другие способы для достижения желаемого результата. Одним из таких способов является использование псевдоэлемента :after, в котором вы можете установить нужное изображение в качестве фона.

Пример CSS кода:

.name {
  position: relative;
}

.name:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100px; /* установите нужную ширину */
  height: 100px; /* установите нужную высоту */
  background: url(путь_к_изображению);
}

Настройте ширину и высоту псевдоэлемента :after в соответствии с вашими требованиями, а затем установите путь к нужному изображению с помощью свойства background.

Answer 2

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

.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 {
  position: relative;
  /* добавьте отступ от края блока, равный ширине аватарки и расстоянию до имени */
}
.person__name::before {
  content: "";
  position: absolute;
  left: -/* значение отступа */;
  /* используйте свойства top и left для позиционирования псевдоэлемента */
}