CSS: Tạo kiểu nội dung của yếu tố trước khi giả trên một danh sách

Question

Tôi đang cố gắng để tạo kiểu một danh sách có thứ tự (không có dấu chấm, một biên giới với bán kính và xoay 45 °)

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

Và 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); 
} 

Nó cho tôi that

Và đây là ở đây tôi đang chặn ... Làm thế nào để xoay biên giới mà không cần xoay số bên trong? Làm thế nào để phong cách nội dung của một phần tử giả trong css?

Cảm ơn lời khuyên nào :)

Answer 1

Không có cách nào để xoay đường viền và văn bản riêng biệt. Thay vào đó, bạn có thể chia số và đường viền thành hai phần tử giả khác nhau, :before và :after.

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