CSS：设置列表上伪元素之前的内容样式

Question

我正在尝试设计一个有序列表的样式（没有点，带有半径的边框并旋转 45°）

<div class="test">
  <ol>
    <li><span>it's a test</span></li>
    <li><span>and again</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 dashed #E2202D;
  -webkit-border-radius:6px;
  border-radius:6px;
  -webkit-transform: rotate(45deg);
}

它给了我 那个< /a>

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

感谢您的任何建议:)

Answer 1

无法单独旋转边框和文本。相反，您可以将数字和边框拆分为两个不同的伪元素：:before 和 :after。

参见： 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);
}

Answer 2

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