html - How does :before work in css? -

कोड में:

  & lt;! DOCTYPE html & gt; & LT; html & gt; & Lt; शीर्ष & gt; & LT; शैली & gt; । Parent {स्थिति: निरपेक्ष; शीर्ष: 500px; चौड़ाई: 400px; सीमा: 1 पीएक्स ठोस हरा; }। Parent: before {z-index: -1; सामग्री:''; स्थिति: पूर्ण; अस्पष्टता: 0.5; चौड़ाई: 400px; ऊँचाई: 200px; पृष्ठभूमि छवि: यूआरएल ( 'wallpaper324845.jpg'); सीमा: 1px ठोस लाल; }। चाइल्ड {रंग: काला; सीमा: 1px ठोस काला; } & Lt; / style & gt; & Lt; / head & gt; & LT; बॉडी & gt; & Lt; div class = "parent" & gt; & Lt; div class = "child" & gt; हैलो मैं बच्चा हूँ & lt; / div & gt; & Lt; / div & gt; & Lt; / body & gt; & Lt; / html & gt;  

मैं इस धागे में बताए अनुसार एक पारदर्शी पृष्ठभूमि बनाने की कोशिश कर रहा हूं।।

चौथे उत्तर से कोड को देखकर। यह कैसे काम करता है, मैं .parent और .parent: before के उपयोग से भ्रमित हूं। मुझे लगता होगा कि इससे प्रत्येक मूल तत्व से पहले एक । Parent: before तत्व पैदा होगा। वास्तव में उलझन में यह कैसे काम करता है?

सीएसएस का उपयोग कर एक आभासी सामग्री बनाता है, इसलिए उपरोक्त मामले में, लेखक स्निपेट का मतलब नीचे का मतलब है

 । Parent: before {z-index: -1; सामग्री:''; स्थिति: पूर्ण; अस्पष्टता: 0.5; चौड़ाई: 400px; ऊँचाई: 200px; पृष्ठभूमि छवि: यूआरएल ( 'wallpaper324845.jpg'); सीमा: 1px ठोस लाल; }  

वह : से पहले का उपयोग करके एक वर्चुअल तत्व बना रहा है, जिसके बाद वह पूर्ण को स्थान देता है, कुछ आयाम देता है, और < कोड> पृष्ठभूमि , यह सुनिश्चित करने के लिए कि वह div सामग्री से नीचे रहता है, वह z-index: -1;

---

< P> दूसरे शब्दों में, : से पहले , : के बाद कुछ भी नहीं है, लेकिन अपने div के अंदर दो span तत्वों को मान लें , लेकिन छद्म तत्वों का उपयोग करके, आपको span होने की आवश्यकता नहीं है जैसा कि आप छद्म तत्वों के साथ एक ही चीज़ प्राप्त कर सकते हैं।

आप पर विचार करें ऐसा कुछ है

  & lt; div & gt; हैलो & lt; span & gt; & lt; / span & gt; & Lt; / div & gt; Div {स्थिति: रिश्तेदार; } Div span {स्थिति: निरपेक्ष; चौड़ाई: 100%; ऊंचाई: 100%; पृष्ठभूमि: # एफ 00; Z- इंडेक्स: -1; बाएं: 0; शीर्ष: 0; }  

भी : या : के बाद का उपयोग करके प्राप्त किया जा सकता है, मार्कअप एक ही रहता है लेकिन सीएसएस जैसे

  div {स्थिति: रिश्तेदार; } Div: after {content: ""; स्थिति: पूर्ण; चौड़ाई: 100%; ऊंचाई: 100%; पृष्ठभूमि: # एफ 00; Z- इंडेक्स: -1; बाएं: 0; शीर्ष: 0; }  

अतः, यह आपके HTML में एक खाली तत्व बचाता है, लेकिन अगर आप ऊपर सीएसएस को देखते हैं, तो संपत्ति का उपयोग कर रहा हूं जो कि हमेशा

इसके अलावा, ध्यान दें कि : से पहले और : के बाद उत्पन्न सामग्री इनलाइन है, इसलिए ऊंचाई , चौड़ाई काम, आपको स्पष्ट रूप से डिस्प्ले: ब्लॉक; या डिस्प्ले: इनलाइन-ब्लॉक; का उल्लेख करने की आवश्यकता है, यदि आप इसे ब्लॉक करना चाहते हैं स्तर, लेकिन इस विशेष मामले में, आपको इसकी आवश्यकता नहीं होगी क्योंकि छद्म तत्व पूर्ण

  div: after {content: "Hello"; मार्जिन-शीर्ष: 20px; / * यह काम नहीं करता क्योंकि छद्म डिफ़ॉल्ट रूप से इनलाइन है / /  

---

ऐसा ब्लॉक या इनलाइन-ब्लॉक