CSS：对列表上的伪元素之前的内容进行样式化 [英] CSS : Styling the content of before pseudo element on a list

问题描述

我试图为有序列表（无点，带半径的边框旋转45°）设置样式。

  ; div class =test> 
< ol> 
< li>< span>是测试< / span>< / li> 
< li>< span>和< / span>< / li> 
< / ol> 
< / div> 
  

和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 dotted＃E2202D; 
 -webkit-border-radius：6px; 
 border-radius：6px; 
 -webkit-transform：rotate（45deg）; 
} 
  

它给我那

这里是我阻塞...如何旋转边框不旋转数字里面？如何在css中为伪元素的内容设计样式？

感谢任何建议：）

解决方案

没有办法单独旋转边框和文本。相反，您可以将数字和边界拆分为两个不同的伪元素：：之前和：之后。 / p>

请参阅： 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 dotted＃E2202D; 
 border-radius：6px; 
 -webkit-transform：rotate（45deg）; 
 -moz-transform：rotate（45deg）; 
 -ms-transform：rotate（45deg）; 
 -o-transform：rotate（45deg）; 
 transform：rotate（45deg）; 
} 
  

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

解决方案

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

这篇关于CSS：对列表上的伪元素之前的内容进行样式化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！