时间戳

首页 > 解决方案 > 样式列表::之前并保持编号

html - 样式列表::之前并保持编号

问题描述

我对排序列表的样式有一个小问题。考虑以下（自动生成的）HTML。它是自动生成的这一事实非常重要，因为我真的不想更正以这种方式生成的每个 HTML 文件。现在为了设计这个坏男孩的数字，我写了一些级联说服的样式表。见下文。

ol {
  list-type: none;
}

ol::first-of-type {
  /* The selector here is my latest addition, and surprise surprise, it doesn't play */
  counter-reset: count_list;
  /* well with the incremention of the counter. Without this, the numbering */
} /* does increment, except when the <ol>'s get closed to accomodate the <p> */

ol li::before {
  display: inline-block;
  counter-increment: count_list;
  content: counter(count_list) " ";
  color: $c-brand-primary;
  /* substitute this with any hex, I'm using SCSS variables */
  width: 1.3em;
  float: left;
  margin: 0 0 0 -1.3em;
  font-weight: bold;
  text-align: right;
  direction: rtl;
  padding-right: 1.3em;
  /* yeah I know it's quite the long way 'round, but it does what I want it to */
}
<ol>
  <li>Item1</li>
  <li>Item2 is an item that looks a lot like a Lorem ipsum dolor sit amet, consectetuer adipiscing elit, meaning it's quite long and causes some problems in wrapping.
</ol>
<!--Yes, it actually closes the ol in favour of showing the next-->
<p>
  <p> Pretend like this says something very long and interesting </p>
  <ol start=3>
    <li> And we list on.</li>
  </ol>

有没有任何 CSS 方法可以让样式考虑这些讨厌start的 s 并让我按照我想要的方式设置列表的数字？

标签： htmlcsshtml-lists

解决方案

您可以使用删除号码ul {list-style: none}

然后，由于您已经在使用:before，您可以使用:after在您的li's位置添加您的号码absolute。

像这样的东西：

ol {
 list-style: none
}

ol::first-of-type {            
 counter-reset: count_list;    
}                              
li {position:relative;counter-increment: li}
.second-ol li {counter-increment: li}
ol li::before {
        display: inline-block;
        counter-increment: count_list;
        content: counter(count_list) " ";
        color: red;              
        width: 1.3em;
        float: left;
        margin: 0 0 0 -1.3em;
        font-weight: bold;
        text-align: right;
        direction: rtl;
        padding-right: 1.3em;     /
}
ol li::after {
  content: counter(li) ;
  color: blue;
  position:absolute;
  left:-20px;
  top:0;
}
.second-ol li::after {
  counter-increment: li+2;
}
<ol>
 <li>Item1</li>
 <li>Item2 is an item that looks a lot like a Lorem ipsum dolor sit amet, consectetuer adipiscing elit, meaning it's quite long and causes some problems in wrapping.
</ol>                //Yes, it actually closes the ol in favour of showing the next <p>

<p> Pretend like this says something very long and interesting </p>

<ol start=3 class="second-ol">
 <li> And we list on.</li>
</ol>

推荐阅读