Як я можу використовувати :: перед pseudoclass створити екран завантаження для свого елемента? - html, css

У мене є така розмітка для div контейнера, який знаходиться десь посередині сторінки:

<div class="content">
<div id="googleMap">...</div>
<div id="someTable">...</div>
<div id="doesntMatter>some other stuff</div>
</div>

Я хотів би використовувати псевдоклас для забезпечення накладання "Завантаження ..." для <div class="content">. А потім пізніше, як тільки дані завантажаться, видаліть накладення, щоб відкрити всі внутрішні div.

У мене проблеми з кодуванням css дляпсевдоклас, щоб він накладав весь div. Якщо я встановлю позицію на абсолютну, вона займає весь екран. Якщо позиція = відносна, це займає найменшу кількість екрану.

.content:before {
content: "Loading...";
text-align: center;
position: absolute;
}

Прикладом є тут. Я піду не так? Чи можливо взаємне накладання за допомогою псевдокласу?

Відповіді:

Абсолютне визначення позиції: Елемент позиціонується відносно свого першого позиціонованого (не статичного) елемента-предка.

Тож вам потрібен div.content позиціонований родич.

.content {
width: 200px;
height: 200px;
border: 1px solid #000;
position: relative;
}

.content::before {
content:"";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.3)
}

<div class="content">
Lorem ipsum
</div>

Вам потрібно додати position: relative до вашого батьківського класу. Абсолютно позиціонований елемент відноситься до найближчого батьківського елемента, який має position: relative коли він намагається позиціонувати себе, що ви можете вважати тегом тіла, якщо ви не вказали його для батьків.