CSS: styling content before a pseudo-element in a list

Question

I am trying to create an ordered list (no point, border with radius and 45 ° rotation)

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

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

He gives me that

And here I am blocking ... How do I rotate the frame without rotating the number inside? How to style pseudo element content in css?

Thanks for any advice :)

Answer 1

It is not possible to rotate the border and text separately. Instead, you can divide the number and border into two different pseudo-elements :before and :after .

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