का उपयोग करना: से पहले /: चयनकर्ता तत्वों

Question

आसपास मार्जिन जोड़ने के लिए के बाद मैं (का एक संशोधित संस्करण) जीन Locklin की 'गहराई' जो सिर्फ ठीक काम करता है लागू किया, यहाँ कोड है:

body:before { 
    height: 10px; 
    width: 110%; 
    position: fixed; 
    top: -10px; 
    left: -10px; 
    z-index: 6; 
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.8); 
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.8); 
    box-shadow: 0px 0px 10px rgba(0,0,0,0.8); 
    content: ""; 
} 

लेकिन मैं उपयोग करना चाहते हैं : & से पहले: मार्जिन या पैडिंग जोड़ने के लिए चयनकर्ताओं के बाद, आप आस-पास के पाठ से फ़ॉर्म को अलग करने के लिए किसी प्रकार का अंतर जानते हैं।

यह मेरे चयनकर्ताओं का उपयोग करने के लिए विशिष्ट अनुच्छेदों के आसपास कुछ अंतर देने के लिए प्रयास करने के बाद आता है, सफलता के बिना मैं इन्हें अपने लक्षित विशेषताओं के आधार पर स्टाइल करने के लिए बदल गया।

मुझे एहसास है कि चयनकर्ता मुख्य रूप से ऑटो-टेक्स्ट को सुविधाजनक बनाने के लिए डिज़ाइन किए गए थे और यह मार्जिन या पैडिंग (नीचे दिए गए प्रश्नों को जोड़ा गया), लाइन ब्रेक, स्पैन, रिक्त डिवीजन, या यहां तक ​​कि जावास्क्रिप्ट का उपयोग करने के साथ भी करना आसान है। एक तत्व बनाएँ, और। लेकिन मैं इसके साथ ऐसा करना चाहता हूं: & से पहले: बाद में।

यहाँ उदाहरण कोड है कि मैं काम कर पाने के लिए करना चाहते हैं क्या है:

form:before { 
    height: 20px; 
    content: ""; 
} 

form:after { 
    height: 20px; 
    content: ""; 
    } 

संभावनाएं मुझे लगता है कि काम करने से यह रोक रहा है ...: से पहले /: जरूरत के बाद ब्लॉक स्तर के रूप में प्रदर्शित करने के लिए के रूप में वे आम तौर पर इनलाइन होते हैं (लेकिन 'गहराई' की आवश्यकता नहीं होती है?) और/या: पहले /: पूर्ण स्थिति की आवश्यकता के बाद।

आपके उदार इनपुट के लिए अग्रिम धन्यवाद।

Answer 1

display: block; निर्दिष्ट करने का प्रयास करें। उन्हें position: absolute; होने की आवश्यकता नहीं है।

form:after { 
    content: ' '; 
    display: block; 
    height: 20px; 
} 

form:before { 
    content: ' '; 
    display: block; 
    height: 20px; 
}