主页 / 问题 / 825174
Accepted
kizoso
Asked:2020-05-09 00:34:46 +0000 UTC2020-05-09 00:34:46 +0000 UTC

带有点的程式化编号列表或如何制作复合内容？

  • 772

通过计数器的值来制作一个风格化的列表是很方便的，但是content你只能在里面放列表元素的序号。可以复合吗？我想在输出后立即有一个数字，然后有一个点。像这样的东西：

content:counter(olNum)+'.';

但是这种记录并没有给出任何结果，而且编号根本不起作用。

这是一个工作示例：

ol {
  margin: 0;
  padding: 0;
  counter-reset: olNum;
  list-style: none;
}

li {
  position: relative;
  margin-bottom: 2px;
  padding-left: 50px;
}

li:before {
  counter-increment: olNum;
  content: counter(olNum);
  position: absolute;
  top: 1px;
  left: 1px;
  font-weight: bold;
  color: red;
}
<ol>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ol>

html

1 个回答

  1. Best Answer

    解决方法太简单了，没有content'e中的“+”：

    ol {
  margin: 0;
  padding: 0;
  counter-reset: olNum;
  list-style: none;
}

li {
  position: relative;
  margin-bottom: 2px;
  padding-left: 50px;
}

li:before {
  counter-increment: olNum;
  content: counter(olNum)'.';
  position: absolute;
  top: 1px;
  left: 1px;
  font-weight: bold;
  color: red;
}
    <ol>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ol>

    • 4

相关问题