Skip to content Skip to sidebar Skip to footer

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

    .testol {
        counter-reset: li;
        list-style-type: none;
    }
    .testol > li {
        position: relative;
        list-style: none;
        margin-bottom: 20px;
        padding-left: 5px;
    }
    .testol > li:before, .testol > li:after {
        position: absolute;
        top: -2px;
        left: -24px;
        width: 21px;
        height: 21px;
        line-height: 21px;
        font-size: 16px;
    }
    .testol > li:before {
        content: counter(li);
        counter-increment: li;
        color: #E2202D;
        font-weight: bold;
        font-family: "Helvetica Neue", Arial, sans-serif;
        text-align: center;
    }
    .testol > 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}

Post a Comment for "Css : Styling The Content Of Before Pseudo Element On A List"