السلام عليكم و رحمة الله تعالى و بركاته
أما بعد.. في هذه التدوينة سنتطرق الى طريقة اضافة ترقيمات القائمة ذات التعدد الرقمي كالتالي
سننسخ الكود التالي:
/* CSS List Custom */
.post ul{list-style:inherit;}
ol {counter-reset:li;list-style:none;font-size:14px;font-family:Electrolize,hacen_saudi_arabiaregular;
padding:0;margin-bottom:4em;}
ol ol {margin:0 2em 0 0;}
.post ol li{position:relative;display:block;padding:0;margin:.5em 2.5em .5em 0;background:transparent;color:#b0b1b8;text-decoration:none;transition:all .3s ease-out;}
.post ol li:hover{color:#E74C3C;}
.post ol li:before{content:counter(li);counter-increment:li;position:absolute;
right:-2.5em;top:50%;margin-top:-1em;background:#F3F3F3;color:#545457;height:2em;width:2em;
line-height:2em;text-align:center;font-weight:bold;border:1px solid #DDD;font-family:Electrolize,hacen_saudi_arabiaregular;transition:all .3s ease-out;}
.post ol li:hover:before{background:#F3F3F3;color:#DB2F2F;border:1px solid #DDD;}
.post ol li:after{position:absolute;content:'';border: .5em solid transparent;
right:-.4em;top:52%;margin-top:-.5em;transition:all .3s ease-out;}
.post ol li:hover:after{right:-.4em;border-right-color:#EC4848;}
.post ol li span{position:relative;display:block;padding:4px 8px;margin-bottom:10px;background:transparent;color:#b0b1b8;text-decoration:none;transition:all .3s ease-out;}
.post ol li span:hover{color:#ED4141;}
dl{margin:.5em 3em .5em 0em}
ol{list-style:decimal outside}
dt{font-weight:bold}
dd{margin:0 2em .5em 0}
ثم نلصق الكود و نحفظ الفالب
ارجو ان يعجبك الموضوع . و إلى تدوينة أخرى ان شاء الله
مري 15 سنة اعيش بمدينة وجد .أهتم بكل ماهو جديد في العالم الافتراضي .و أهدف الى تطوير المحتوى المعلوماتي العربي
