CSS：样式化列表上之前伪元素的内容答案

【问题标题】：CSS : Styling the content of before pseudo element on a listCSS：样式化列表上之前伪元素的内容
【发布时间】：2012-02-10 10:52:01
【问题描述】：

我正在尝试设置有序列表的样式（无点，带半径的边框并旋转 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 中设置伪元素内容的样式？

感谢您的建议:)

【问题讨论】：

标签： css html-lists pseudo-element

【解决方案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);
}

【讨论】：

你几秒钟就打败了我 :)
请不要忘记transform 的 W3C 标准语法！不仅 WebKit 浏览器支持它。甚至 IE9 也支持-ms-。
@IlyaStreltsyn：是的，我同意。它不在我的答案中，因为它不在我简单复制的 OP 代码中。如果我及时看到它，我会批准your edit。反正我修好了。
我已经等不及日期前缀过时了。

【解决方案2】：

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

【讨论】：

作为答案绝对不相关，应该删除。