CSS: Стилизация содержания перед псевдо элементом в списке

Question

Я пытаюсь стилем упорядоченного списка (не точки, границы с радиусом и поворот 45 °)

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

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

это дает мне that

И это здесь я блокирующее ... Как повернуть границу без поворота номера внутри? Как стилизовать содержимое псевдоэлемента в css?

Спасибо за любые советы :)

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}