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

它给了我that

这就是我在阻止......如何在不旋转数字的情况下旋转边框？如何在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}

CSS：在列表上为之前的伪元素设置样式

2 个答案: