स्थिति के लिए उचित तरीका: छद्म तत्वों से पहले

Question

:before और :after छद्म-तत्वों की तरह चित्रों की तरह स्थिति का उचित तरीका क्या है? मैं विभिन्न तरीकों के समूह के साथ गड़बड़ कर रहा हूं, लेकिन उनमें से कोई भी बहुत ही सुरुचिपूर्ण समाधान की तरह प्रतीत नहीं होता है।

यह मैं क्या करने की कोशिश कर रहा हूँ है:

यह मैं क्या किया है:

div.read-more a:before { 
    content: url('/images/read_more_arrow_sm.png'); 
    position: absolute; 
    top: 4px; 
    left: -15px; 
} 

<div class="read-more"> 
    <a href="#">Read More</a> 
</div> 

मैं मूल रूप से बस चाहते छवि पाठ के साथ गठबंधन किया है। क्या ऐसा करने का कोई और तरीका है?

यह सही हो सकता है अगर मैं सिर्फ :before छवि पर गद्दी और मार्जिन इस्तेमाल कर सकते हैं, और कहा कि चाहिए तुम क्या करते हो रहा है। लेकिन किसी कारण से, यह मेरे लिए काम नहीं कर रहा है। मैं क्षैतिज पैडिंग और मार्जिन जोड़ सकता हूं, लेकिन ऊपर और नीचे पैडिंग कुछ भी नहीं करता है। ऐसा क्यों होगा?

Answer 1

content के बजाय background उपयोग करने का प्रयास और content में एक प्लेसहोल्डर डाल: पाठ के पास केवल स्थिति छवि के लिए http://jsfiddle.net/7X7x2/1/

Answer 2

यदि आप चाहते हैं, तो आप शायद खड़ी -align संपत्ति की जरूरत है:

div.read-more a:before { 
    vertical-align: bottom; 
    content: url(image.png); 
} 

यह संभावित मान निम्नलिखित है: आधारभूत, उप, सुपर, शीर्ष, पाठ शीर्ष के मध्य, नीचे, पाठ-नीचे

यह मौजूदा टेक्स्ट लाइन से टेक्स्ट की स्थिति से गणना की गई मान (उदाहरण में और पढ़ें)।

पूर्ण संदर्भ: http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

(अंतरिक्ष जोड़ने के लिए पहले पाठ बस-सही मार्जिन का उपयोग करें)

Answer 3

आप नीचे दिए गए कोड को सामग्री ले जाने के लिए उपयोग कर सकते हैं:

div.read-more a:before { 
    content: "\00BB \0020"; 
    position: relative; 
    top: -2px; 
} 

Answer 4

यह था मेरा समाधान, माउसओवर के साथ:

div.read-more a:before { 
    content: url(image.png); 
    position: relative; 
    top: 3px; 
    left: -7px; 
    padding-left: 7px; 
} 
div.read-more a:hover:before { 
    content: url(image_hover.png); 
} 

Answer 5

आपको बनाने की ज़रूरत है स्थिति: .read-more के सापेक्ष और फिर आप स्थिति बदल सकते हैं।

Answer 6

संपादित @Richard जेपी Le Guen के बेला तो यह अनुरोध किया संस्करण थोड़ा और

एचटीएमएल

<div class="read-more"> 
    <a href="#">Read More</a> 
</div> 

सीएसएस

div.read-more a:before { 
    background: url('http://i.stack.imgur.com/XyerX.jpg') CENTER CENTER NO-REPEAT; 
    content:""; 
    width:21px; 
    height:21px; 
    display: inline-block; 
    vertical-align: sub; 
    margin-right: 4px; 
    line-height: 21px; 
} 
div.read-more { 
    background: red; 
    line-height: 21px; 
    display:block; 
    vertical-align:middle; 
    width: max-content; 
    padding: 4px; 
} 
div.read-more a{ 
    color: white; 
    text-decoration:none; 
} 

http://jsfiddle.net/7X7x2/688/