Come posso usare :: before pseudoclass per creare una schermata di caricamento per il suo elemento? - html, css

Ho il seguente markup per un div contenitore che si trova da qualche parte nel mezzo della pagina:

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

Mi piacerebbe usare una pseudoclasse per fornire un overlay "Loading ..." per il <div class="content">. E poi, una volta caricati i dati, rimuovi l'overlay per rivelare tutti i div interni.

Sto riscontrando problemi nella codifica dei CSS per ilpseudoclasse in modo da sovrapporre l'intero div. Se imposto la posizione su assoluta, occupa l'intero schermo. Con position = relative, occupa la minima quantità di schermo.

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

L'esempio è Qui. Sto andando in questo modo nel modo sbagliato? La sovrapposizione è persino possibile ottenere con una pseudoclasse?

risposte:

Posiziona definizione assoluta: l'elemento viene posizionato rispetto al suo primo elemento antenato posizionato (non statico).

Quindi hai bisogno del parente div.contenuto posizionato.

.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>

Devi aggiungere position: relative alla tua classe genitore. L'elemento assolutamente posizionato si riferisce al genitore più vicino che ha position: relative quando cerca di posizionarsi, che puoi pensare di essere il tag body a meno che non lo specifichi su un genitore.