Skip to content Skip to sidebar Skip to footer
Home / Css / Html Lists / Pseudo Element

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

Post a Comment
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}

You may like these posts

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