dopo che lo pseudoelemento non appare nel codice

Question

Sto provando a usare l'elemento pseudo dopo per aggiungere alcuni effetti a un sito.

<div class="product-show style-show"> 
    <ul> 
    <li> 
     .... 
     <div class="..."> 
     <div class="readMore less">...</div> 
     <a href="3" class="readMoreLink" onclick="return false;">Read More</a> 
     </div> 
     .... 
    </li> 
    </ul> 
</div> 

e fogli di stile:

.product-show .readMore.less { 
    max-height: 200px; 
    height: 100%; 
    overflow: hidden; 
} 

.product-show .readMore.less:after { 
    background: rgba(255, 255, 255, 0); 
    display: block; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 30px; 
} 

vedo lo stile per .product presentazione .readMore.less applicata, ma non vedo un :: dopo la notazione nei blocchi HTML quando ho sto esaminando il sito da Chrome (ultima versione)/MacOS. Ho letto che a volte ci sono problemi con i browser più vecchi, ma ho pensato che avrei potuto vedere almeno la notazione degli elementi pseudo dopo: se stavo definendo lo stile correttamente. Che cosa sto facendo di sbagliato?

Answer 1

È perché lo pseudo-elemento isn't generated if the content value is omitted (poiché il valore iniziale/predefinito è none).

Specificare un valore content per generare lo pseudoelemento. Un valore di '' è sufficiente.

.product-show .readMore.less:after { 
    content: ''; 
    background: rgba(255, 255, 255, 0); 
    display: block; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 30px; 
} 

Answer 2

Come per il MDN:

La proprietà CSS contenuto viene utilizzato con il :: :: prima e dopo pseudo-elementi per produrre i contenuti in un elemento.

Ciò significa che se non si include la proprietà content, l'elemento :after o :before non mostrerà tutto.

Aggiungi questa riga nel codice:

content: ""; // Leave this empty 

e vedere come questo influenzi il risultato.

Come nota, normalmente aggiungere testo nella proprietà content quando l'elemento :before o :after viene utilizzato per visualizzare il testo. In molti casi, però, scoprirai che lo stai semplicemente lasciando vuoto.