Разница между относительным расположением псевдо элемента и абсолютного расположенного псевдо элемента

Question

Рассмотрим следующие три сценария:

Сценарий Один:

div { 
    width: 100px; 
    height: 100px; 
    background-color: black;  
} 

div:before { 
    content: ""; 
    width: 10px; 
    height: 10px; 
    background-color: darkred; 
    position: relative; 
} 

Сценарий второй:

div { 
    width: 100px; 
    height: 100px; 
    background-color: black;  
} 

div:before { 
    content: ""; 
    width: 10px; 
    height: 10px; 
    background-color: darkred; 
    position: absolute; 
} 

Сценарий третий:

div { 
    width: 100px; 
    height: 100px; 
    background-color: black;  
} 

div:before { 
    content: ""; 
    width: 10px; 
    height: 10px; 
    background-color: darkred; 
    display:block; 
    position: relative; 
} 

Сценарий 1 (относительное положение) не показывает псевдоэлемент darkred. Но когда он изменен на position:absolute, псевдоэлемент виден. Кроме того, как показано в третьем сценарии, когда я добавил свойство display:block в сценарий один (относительное положение), элемент будет виден.

Зачем нужен relative Требуется положение display:block и absolute нет?

Answer 1

Псевдокласс, такой как :before, имеет значение свойства CSS display значения inline.

Элементы, которые являются display: inline; и position: relative;, по умолчанию не являются элементами «уровня блока», и если у них нет контента, они не занимают никакой ширины. Таким образом, если вы не объявлять display: block; и у вас есть пустое содержание декларации, как content: "";, он не будет занимать любую ширину вообще в сценарии 1.

элементов, которые position: absolute; взяты из потока и «блочные "элементы со значением по умолчанию display CSS block. Из-за этого сценарий 2 отображает псевдо-элемент :before, соблюдая его объявления ширины и высоты.

Сценарий 3 является успешным, поскольку свойство display явно установлено в block, что отличает объявления ширины и высоты.

Эти значения по умолчанию можно установить, проверив элемент :before в инструментах веб-разработчика вашего браузера - см. Инспектор «элементов» инструментов.