Jak mogę użyć :: before pseudoclass, aby utworzyć ekran ładowania dla swojego elementu? - html, css

Mam następujący znacznik dla div pojemnika, który jest gdzieś na środku strony:

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

Chciałbym użyć pseudoklasy, aby zapewnić nakładkę „Ładowanie ...” dla <div class="content">. Następnie, po załadowaniu danych, usuń nakładkę, aby wyświetlić wszystkie wewnętrzne divy.

Mam problem z kodowaniem css dlapseudoklaska, aby pokryć cały div. Jeśli ustawię pozycję na absolutną, zajmuje cały ekran. Z pozycją = względna, zajmuje najmniejszą ilość ekranu.

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

Przykładem jest tutaj. Czy to nie tak? Czy nakładka jest nawet możliwa do osiągnięcia za pomocą pseudoklas?

Odpowiedzi:

Położenie absolutnej definicji: element jest pozycjonowany względem swojego pierwszego pozycjonowanego (nie statycznego) elementu przodka.

Potrzebny jest więc względny pozycjonowany 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>

Musisz dodać position: relative do twojej klasy macierzystej. Element pozycjonowany bezwzględnie odnosi się do najbliższego rodzica, który ma position: relative kiedy próbuje się ustawić, co można nazwać znacznikiem ciała, chyba że podasz go rodzicowi.