CSS：在子元素中显示有序列表项索引

Question

我正在构建一个手风琴类型的小部件，如下图所示：

我想使用有序列表，其中每个<li>元素包含一个问题，答案和展开/折叠按钮。

<li>
    <span class="question">Example question</span>
    <span class="answer">Example answer</span>
    <a class="expand-collapse-button" href="#"></a>
</li>

如何在不使用Javascript的情况下在该列表项的子元素内显示列表项索引？即我希望<span class="question">元素在1. Example question中显示其父级索引。

Answer 1

您可以使用CSS Counters。

＆＃13;

＆＃13;

ul,
li {
  margin: 0;
  padding: 0;
}

ul {
  counter-reset: li-count;
}

li {
  counter-increment: li-count;
}

li .question:before {
  content: counter( li-count) '. ';
  font-weight: bold;
}

＆＃13;

<ul>
  <li>
    <span class="question">Example question one.</span>
    <span class="answer">Example answer one.</span>
    <a class="expand-collapse-button" href="#"></a>
  </li>
  <li>
    <span class="question">Example question two.</span>
    <span class="answer">Example answer two.</span>
    <a class="expand-collapse-button" href="#"></a>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

麻烦在于对数字进行样式化并排列答案段落。可能更容易删除有序列表中的数字，并使用counter将其应用于.question元素。

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

li {
  counter-increment: qa;
  padding: 1em;
}

li .question, li .answer {
  display: block;
}

li .question {
  font-size: 1.4em;
}

li .question:before {
  content: counter(qa)". ";
}

<ol>
  <li>
    <span class="question">Example question</span>
    <span class="answer">Example answer</span>
    <a class="expand-collapse-button" href="#"></a>
  </li>
  <li>
    <span class="question">Example question</span>
    <span class="answer">Example answer</span>
    <a class="expand-collapse-button" href="#"></a>
  </li>
  <li>
    <span class="question">Example question</span>
    <span class="answer">Example answer</span>
    <a class="expand-collapse-button" href="#"></a>
  </li>
  <li>
    <span class="question">Example question</span>
    <span class="answer">Example answer</span>
    <a class="expand-collapse-button" href="#"></a>
  </li>
</ol>

Answer 3

您可以在.answer元素和display: block添加一些负余量。

hr {
  margin: 15px 0;
  margin-left: -15px;
}
.answer {
  display: block;
  margin-left: -15px;
}

<ol>
  <li>
    <span class="question">Example question</span>
    <span class="answer">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum non adipisci saepe dicta quasi, dolor, facilis provident voluptate eius quod facere et impedit obcaecati enim. Delectus, nihil laudantium magni ad!</span>
    <a class="expand-collapse-button" href="#"></a>
    <hr>
  </li>
  <li>
    <span class="question">Example question</span>
    <span class="answer">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, voluptatum, molestiae. Magnam fuga quibusdam saepe animi dolore aperiam labore iusto, aspernatur esse, distinctio voluptas doloribus quasi rerum! Consectetur, quos quidem.</span>
    <a class="expand-collapse-button" href="#"></a>
    <hr>
  </li>
</ol>

Answer 4

你可以看一下， https://fiddle.jshell.net/RemyaJ/af7tcL0m/

使用计数器增量css，

body {
    counter-reset: section;
}

label:before {
    counter-increment: section;
    content: counter(section);
}