प्रत्येक सूची आइटम के बाद छवि डालें

143

प्रत्येक सूची तत्व के बाद एक छोटी छवि सम्मिलित करने का सबसे अच्छा तरीका क्या होगा? मैंने इसे छद्म वर्ग के साथ आजमाया लेकिन कुछ सही नहीं है ...

ul li a:after {display: block;
width: 3px;
height: 5px;
background: url ('../images/small_triangle.png') transparent no-repeat;}

किसी भी मदद के लिए धन्यवाद!

css

— जैक
स्रोत

326

इसे करने का आसान तरीका है:

ul li:after {
    content: url('../images/small_triangle.png');
}

— jimyi
स्रोत

और फ़ायरफ़ॉक्स में इसके साथ कुछ समस्याएं भी हैं

— जॉनी_डी।

204

ज्ञात हो कि IE7 बेकार है।

— बिग मैकलेरज्यूज

@RichardGarside "doctype" द्वारा, क्या आपको शीर्ष पर इस तरह का कुछ मतलब है? <!DOCTYPE html>

— जो मोरानो

इस पद्धति के साथ समस्या यह है कि आप छवि के लिए एक वैकल्पिक पाठ प्रदान नहीं कर सकते हैं, जो (इस बात पर निर्भर करता है कि छवि का उपयोग किस लिए किया जाता है) पहुंच क्षमता के आधार पर हो सकता है।

— डेमियन

2

लेकिन आप इस का उपयोग करके छवि को ऊंचाई / चौड़ाई नहीं दे सकते।

— फैसल अशफाक

82

इसे इस्तेमाल करे:

ul li a:after {
    display: block;
    content: "";
    width: 3px;
    height: 5px;
    background: transparent url('../images/small_triangle.png') no-repeat;
}

आपको content: "";अपनी उत्पन्न तत्व सामग्री देने के लिए घोषणा की आवश्यकता है, भले ही वह सामग्री "कुछ भी" न हो।

इसके अलावा, मैंने आपके backgroundघोषणा पत्र के वाक्यविन्यास / आदेश को ठीक कर दिया है ।

— टायसन
स्रोत

13

मुझे यह तकनीक सरल लोगों पर पसंद है क्योंकि यह आपको पृष्ठभूमि-छवि-आकार का उपयोग करके छवि के आकार पर नियंत्रण देता है।

— एंड्रयू हेजेज ने

2

यदि आपको एक छवि को क्षैतिज रूप से केंद्र करना है तो आपको इसकी आवश्यकता भी होगी। आप इसे स्थिति में नहीं ला सकते left: 50%क्योंकि यह मध्य में संरेखित नहीं किया जाएगा। left: 0; width: 100%पृष्ठभूमि की स्थिति का उपयोग करें और सेट करें बजाय 50%। मेरे लिए अच्छा काम करता है। आवश्यक contentविशेषता के बारे में टिप के लिए धन्यवाद ।

— ygoe

1

यह बेहतर उत्तर था और, यदि आप बूटस्ट्रैप का उपयोग कर रहे हैं, तो आपको प्रदर्शन का उपयोग करने की आवश्यकता हो सकती है: इनलाइन-ब्लॉक; अन्यथा छवि प्रत्येक ली आइटम के नीचे होगी न कि दाएं या बाएं

— मार्वल मो

1

बहुत अच्छा लगता है, लेकिन छवि को इनलाइन प्रदर्शित करने के लिए ("ली" के बाद), यह "डिस्प्ले: इनलाइन-ब्लॉक" होना चाहिए।

— डेडपूल

और भीbackground-size: container

— रोजर

11

IE8 समर्थन के लिए, "सामग्री" संपत्ति खाली नहीं हो सकती।

इसे प्राप्त करने के लिए मैंने निम्नलिखित कार्य किए हैं:

.ul li:after {
    content:"icon";
    text-indent:-999em;
    display:block;
    width:32px;
    height:32px;
    background:url(../img/icons/spritesheet.png) 0 -620px no-repeat;
    margin:5% 0 0 45%;
}

नोट: यह छवि स्प्राइट के साथ भी काम करता है

— jonnocraig
स्रोत

4

मुझे लगता है कि आपकी समस्या यह है कि: के बाद psuedo- तत्व सामग्री की आवश्यकता है: संपत्ति इसके अंदर सेट। आपको कुछ डालने के लिए यह बताने की आवश्यकता है। तुम भी सीधे यह छवि सम्मिलित कर सकते हैं:

ul li:after {
    content: url('../images/small_triangle.png');
}

— गेब्रियल हर्ले
स्रोत

1

ul li + li:before
{
    content:url(imgs/separator.gif);
}

— Chếa biết
स्रोत

0

ऐसा करने के लिए मेरा समाधान:

li span.show::after{
  content: url("/sites/default/files/new5.gif");
  padding-left: 5px;
}

— मैट
स्रोत