CSS : Styling The Content Of Before Pseudo Element On A List

I'm trying to style an ordered list (no dot, a border with radius and rotate 45°)

1. it's a test

   Solution 1:

   There's no way to rotate the border and text separately. Instead, you can split the number and the 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);
   }
   

   
   

   Solution 2:

   {"data":{"error":"HTTP Access is disabled. Requests must use SSL (HTTPS)."},"success":false,"status":400}
   

   
   

Share