Использование CSS свойства 'position' в псевдоэлементе :: after

Question

Я новичок в HTML / CSS и изучал различные элементы и свойства. В приведенном ниже коде я заметил, что если я обновлю свойство 'position' на абсолютное или фиксированное, в псевдоэлементе :: after я смогу получить нужный цвет фона. Однако изменение свойства на относительное или stati c не отображает цвет фона. Почему это происходит; я что-то здесь упускаю?

p::after {
  position: absolute;
  content: "XYZ";
  background-color: yellow;
  height: 10px;
  width: 20px;
}

<p>Sample text</p>

Answer 1

Сначала сделайте родительский элемент относительным. Только тогда вы можете использовать абсолютную позицию в псевдоэлементе.

p {
  position:relative;
 }
 
 p::after{
       position: absolute;
      content: "XYZ";
      background-color: yellow;
      height: auto;
      width: auto;
  }
 

<p>Sample Text</p>

  p { 
    position:relative;
   }

   p::after {
       position: absolute;
      content: "XYZ";enter code here
      background-color: yellow;
      height: auto;
      width: auto;
  }

Answer 2

Если вы хотите использовать относительный, вы можете сделать это так

p{
position: relative
}
p::after{
  position: absolute
  content: "XYZ";
  background-color: yellow;
  height: 10px;
  width: 20px;
}

Вместо абсолютного позиционирования вы можете использовать поля для позиционирования элемента p :: after.

Абсолютная позиция: Элемент удален из обычного потока документов, и для элемента в макете страницы не создано места. Он расположен относительно своего ближайшего предка, если таковой имеется; в противном случае он помещается относительно исходного содержащего блока.

Answer 3

не знаете, для чего вы используете высоту и ширину? но попробуйте изменить эти значения на auto

  <style>
    p::after {
      position: absolute;
      content: "XYZ";
      background-color: yellow;
      height: auto;
      width: auto;
    }
  </style>