Início / coding / Perguntas / 78537842
Accepted
Meek
Asked: 2024-05-27 16:02:40 +0800 CST

Números de incremento automático se os elementos não forem irmãos

  • 772

É possível - apenas com CSS - incrementar números automaticamente se os elementos não forem irmãos?

Algo assim?

.numbers {
    counter-increment: item;

    &::before {
        content: counter(item) ":";
    }
}
<div class="container">
  <div class="row">
    <div class="col">
      <div class="numbers"></div>
      Column
    </div>
    <div class="col">
      <div class="numbers"></div>
      Column
    </div>
    <div class="col">
      <div class="numbers"></div>
      Column
    </div>
    <div class="col">
      <div class="numbers"></div>
      Column
    </div>
  </div>
</div>

E se não, qual a melhor e mais eficiente forma de o conseguir? JavaScript?

html

1 respostas

  1. Best Answer

    Em vez de incrementar seu contador com .numbers, você pode fazer isso com o pai.

    .col {
  counter-increment: item;
}

.numbers:before {
  content: counter(item) ":";
}
    <div class="container">
  <div class="row">
    <div class="col">
      <div class="numbers"></div>
      Column
    </div>
    <div class="col">
      <div class="numbers"></div>
      Column
    </div>
    <div class="col">
      <div class="numbers"></div>
      Column
    </div>
    <div class="col">
      <div class="numbers"></div>
      Column
    </div>
  </div>
</div>

    • 1

relate perguntas