CSS: Styling zawartość przed pseudo elementu na liście

Question

Staram się projektować uporządkowaną listę (bez kropki, graniczy z promieniem i obracać 45 °)

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

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

to daje mi that

A to tutaj jestem blokując ... Jak obrócić ramkę bez obracania numer w środku? Jak stylizować zawartość pseudo elementu w css?

Dzięki za wszelkie rady :)

Answer 1

nie ma sposobu, aby obrócić ramkę i tekst oddzielnie. Zamiast tego można podzielić liczbę i obramowanie na dwa różne pseudoelementy: :before i :after.

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