Список стилей :: перед и сохранение нумерации

Question

У меня небольшая проблема с оформлением моих упорядоченных списков. Рассмотрим следующее (сгенерированное автоматически) 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 И позвольте мне стилизовать ПРОСТО номера списка как я хочу их?

Answer 1

Вы можете удалить номер с помощью 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>