सीएसएस: एक सूची पर छद्म तत्व से पहले की सामग्री स्टाइलिंग

Question

मैं एक आदेश दिया सूची शैली कोशिश कर रहा हूँ (कोई डॉट, त्रिज्या के साथ एक सीमा और बारी बारी से 45 डिग्री)

<div class="test"> 
    <ol> 
    <li><span>it's a test</span></li> 
    <li><span>and again</span></li> 
    </ol> 
</div> 

और सीएसएस

.test ol { 
    counter-reset: li; 
    list-style-type: none; 
} 
.test ol > li { 
    position:relative; 
    list-style:none; 
} 
.test ol > li:before { 
    content:counter(li); 
    counter-increment:li; 

    position:absolute; 
    top:-2px; 
    left:-24px; 
    width:21px; 

    color:#E2202D; 
    font-weight:bold; 
    font-family:"Helvetica Neue", Arial, sans-serif; 
    text-align:center; 
    border: 1px dashed #E2202D; 
    -webkit-border-radius:6px; 
    border-radius:6px; 
    -webkit-transform: rotate(45deg); 
} 

यह मुझे दे that

और यह यहाँ है मैं अवरुद्ध कर रहा हूँ ... कैसे सीमा बारी बारी से बिना अंदर संख्या को घुमाने के लिए? सीएसएस में छद्म तत्व की सामग्री को कैसे शैलीबद्ध करें?

किसी भी सलाह के लिए धन्यवाद :)

Answer 1

अलग से सीमा और पाठ बारी बारी से करने का कोई तरीका नहीं है। इसके बजाय, आप संख्या और सीमा को दो अलग-अलग छद्म-तत्वों, :before और :after में विभाजित कर सकते हैं।

देखें:http://jsbin.com/agotuj/54/edit

.test ol { 
    counter-reset: li; 
    list-style-type: none; 
} 
.test ol > li { 
    position: relative; 
    list-style: none; 
    margin-bottom: 20px; 
    padding-left: 5px; 
} 
.test ol > li:before, .test ol > li:after { 
    position: absolute; 
    top: -2px; 
    left: -24px; 
    width: 21px; 
    height: 21px; 
    line-height: 21px; 
    font-size: 16px; 
} 
.test ol > li:before { 
    content: counter(li); 
    counter-increment: li; 
    color: #E2202D; 
    font-weight: bold; 
    font-family: "Helvetica Neue", Arial, sans-serif; 
    text-align: center; 
} 
.test ol > li:after { 
    content: ''; 
    border: 1px dashed #E2202D; 
    border-radius: 6px; 
    -webkit-transform: rotate(45deg); 
     -moz-transform: rotate(45deg); 
     -ms-transform: rotate(45deg); 
     -o-transform: rotate(45deg); 
      transform: rotate(45deg); 
} 

Answer 2

{"data":{"error":"HTTP Access is disabled. Requests must use SSL (HTTPS)."},"success":false,"status":400}