एक ताज़ा सरल (अभी तक चालाक) तरीका है एक सीधा, अर्थ अनियंत्रित सूची (
- ) पीटर कूपर से।
ol ( list-style-type: none; ) li ( position: relative; margin: 0; padding-bottom: 1em; padding-left: 20px; ) li:before ( content: ''; background-color: #c00; position: absolute; bottom: 0px; top: 0px; left: 6px; width: 3px; ) li:after ( content: ''; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 32 32' focusable='false'%3E%3Ccircle stroke='none' fill='%23c00' cx='16' cy='16' r='10'%3E%3C/circle%3E%3C/svg%3E"); position: absolute; left: 0; top: 2px; height: 12px; width: 12px; )बीबीसी समाचार वेबसाइट पर इसे लागू करने के बाद पीटर को विचार मिला। वह संस्करण एक आदेशित सूची के साथ चला गया (
- ) तत्व जो समझ में आता है अगर हम घटनाओं के एक विशिष्ट क्रम के साथ काम कर रहे हैं। पीटर की एक अनियंत्रित सूची का उपयोग करता है जो बस के रूप में अच्छी तरह से हो सकता है।
) में a: पहले छद्म तत्व है जो खाली सामग्री-वार है लेकिन लाल पृष्ठभूमि रंग के साथ 2 पिक्सेल चौड़ा होने के रूप में चिह्नित है। यह प्रत्येक से पहले 'लाइन' बनाता है- । इसके बाद की स्टाइलिंग इस छद्म तत्व / लाइन को स्थित करती है।
लंबी कहानी छोटी, यह एक मानक HTML सूची है (बीबीसी उपयोग करता है
लेकिन मैं साथ गया था
) जहां प्रत्येक सूची आइटम (
:afterछद्म तत्व में SVG का स्मार्ट, मार्कअप-सेविंग एडिशन सादत के सौजन्य से है। मूल संस्करण में एसवीजी के आकार को शामिल करने और इसे दोहराने से रोकने के लिए अतिरिक्त पृष्ठभूमि गुण शामिल थे, लेकिन मैंने उन्हें पूरी तरह से आवश्यक नहीं पाया, कम से कम इस संदर्भ में। हालाँकि, ध्यान दें कि SVG मार्कअप focusableकीबोर्ड टैब पर इसे शामिल करने से रोकने के लिए विशेषता का ठीक से उपयोग करता है । अच्छे मुद्राएं! ?
यहाँ परिणाम है:
कोडऑन
पर ज्यॉफ ग्राहम (@geoffgraham) द्वारा कंटीन्यूअस वर्टिकल टाइमलाइन के रूप में पेन अनऑर्डर की गई सूची देखें ।
स्रोत