Question

我使用Dreamweaver CC。我想创建一个列表如下：

Q1. nnn
Q2. aaa
Q3. bbb

A1. ddd
A2. dde
A3. ccc

我用这个css：

ol {
    counter-reset: item;
    list-style-type: decimal;
}
ol li:before {
    content: 'Q' counter(item, decimal) '. ';
    counter-increment: item;
}

＆＃13;

ol {
  counter-reset: item;
  list-style-type: decimal;
}
ol li:before {
  content: 'Q' counter(item, decimal) '. ';
  counter-increment: item;
}

＆＃13;

<ol>
  <li>Foo</li>
  <li>Bar</li>
</ol>

＆＃13;

我明白了：

1Q1.
2Q2.

Answer 1

因为您正在创建和使用css生成的内容来实现您自己的计数器，所以使用::before伪元素和css计数器，您需要删除本机计数器;否则你自己的计数器（正如你所见）被附加到（或简单地跟随）本机计数器。所以：

＆＃13;

ol {
  counter-reset: item;
  list-style-type: none;
}
ol li:before {
  content: 'Q' counter(item, decimal) '. ';
  counter-increment: item;
}

＆＃13;

<ol>
  <li>Foo</li>
  <li>Bar</li>
</ol>

＆＃13;

Answer 2

您必须将list-style-type设为无：

ol {
    counter-reset: item;
    list-style-type: none;
}

ol li:before {
    content: 'Q' counter(item, decimal) '. ';
    counter-increment: item;
}

看看这个演示：http://jsbin.com/paweyadobe/1/

创建以静态字母十进制数开头的列表

2 个答案: