कोड

Question

में दिखाई नहीं दे रहा है, मैं साइट पर कुछ प्रभाव जोड़ने के लिए बाद के छद्म तत्व का उपयोग करने की कोशिश कर रहा हूं।

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

और स्टाइलशीट नहीं:

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

मैं देख रहा हूँ .product शो .readMore.less के लिए स्टाइल लागू किया जा रहा है, लेकिन मैं एक नहीं दिख रहा है :: HTML ब्लॉकों में अंकन के बाद जब मैं मैं क्रोम (नवीनतम संस्करण)/मैकोज़ से साइट की जांच कर रहा हूं। मैंने पढ़ा है कि पुराने ब्राउज़रों के साथ कभी-कभी समस्याएं होती हैं, लेकिन मुझे लगता है कि अगर मैं शैली को सही ढंग से परिभाषित कर रहा था तो मुझे छद्म तत्व नोटेशन के बाद कम से कम :: देखने में सक्षम होना चाहिए। मैं क्या गलत कर रहा हूं?

Answer 1

ऐसा इसलिए है क्योंकि छद्म-तत्व isn't generated if the content value is omitted (प्रारंभिक/डिफ़ॉल्ट मान none है)।

छद्म-तत्व उत्पन्न करने के लिए content मान निर्दिष्ट करें। '' का मान पर्याप्त है।

.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

MDN के अनुसार:

सामग्री सीएसएस संपत्ति के साथ प्रयोग किया जाता है :: पहले और :: के बाद छद्म तत्वों एक तत्व में सामग्री उत्पन्न करने के लिए।

इसका मतलब क्या है कि यदि आप content संपत्ति शामिल नहीं हैं, :after या :before तत्व पूरी तरह नहीं दिखाया जाएगा है।

अपने कोड में इस लाइन जोड़ें:

content: ""; // Leave this empty 

और देखते हैं कि कैसे है कि परिणाम को प्रभावित करता है।

बस एक नोट के रूप में, आप सामान्य रूप से पाठ content संपत्ति में जब :before या :after तत्व पाठ प्रदर्शित किया जाता है जोड़ना होगा। हालांकि कई मामलों में, आप पाएंगे कि आप इसे खाली छोड़ रहे हैं।