barbuk barbuk - 3 years ago 200
CSS Question

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°)

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


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


It give me that

And this is here i'm blocking... How to rotate the border without rotate the number inside ? How to style the content of a pseudo element in css ?

Thanks for any advice :)

Answer Source

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);
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download