CSS: Bir listedeki sözde öğesinden önce içeriğini Şekillendirici

Question

ben sıralı bir listesini stil çalışıyorum

(hiçbir nokta, yarıçapında bir sınır ve döndürmek 45 °)

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

Ve css

.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); 
} 

içeride sayısını döndürmek olmadan nasıl sınır döndürmek için ...

bana that

vermek Ve bu i bloke ediyorum burada? Sahte elemanın içeriği css'de nasıl şekillendirilir? herhangi bir tavsiye için

Teşekkür :)

Answer 1

ayrı sınır ve metni döndürmek için hiçbir yol yoktur. Bunun yerine, sayı ve sınırı iki farklı sözde öğeye ayırabilirsiniz: :before ve :after.

Bkz: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}