Czy istnieje sposób wstawienia indeksu elementu (numeru potomnego) jako tekstu w elemencie wyłącznie przy użyciu CSS?

Question

Moim celem jest wydrukowanie pliku tekstowego wiersz po wierszu i dodanie numeru wiersza na początku. Tak:

<div id="wrapper"> 
    <div class="line">1: asdf</div> 
    <div class="line">2: asdfasdf</div> 
    <div class="line">3: asdfasdfasdfasdf</div> 
    <div class="line">4: asdf</div> 
</div> 

n jest zmienna w CSS odpowiedzialny za indeks elementu w obrębie jego rodzica i dziecka w selektora można wykonywać operacje na nim, np. nth-child(2n + 3)

Czy istnieje sposób na pobranie tej zmiennej i wstawienie jej jako zwykłego tekstu? Zasadniczo słuszne:

.line:before { 
    content: n; 
} 

wiem, że mogę to osiągnąć z SASS czyli co używam, właśnie zastanawiałem się, czy istnieje jakiś sposób, aby wyciągnąć go z wanilii CSS.

Answer 1

Tak, można to zrobić za pomocą liczników CSS. Liczniki CSS można tworzyć i zwiększać, gdy napotkany zostanie odpowiedni selektor. W tym przypadku możemy utworzyć licznik na poziomie elementu .wrapper, a następnie zwiększać wartość licznika za każdym razem, gdy napotkany zostanie nowy element .line.

Właściwość counter-reset służy do tworzenia licznika, natomiast counter-increment służy do zwiększania wartości. Wartość licznika można następnie przypisać do pseudoelementu za pomocą właściwości content o wartości: counter(counter-name).

Jak zauważył Aaron Lavers w swoim komentarzu, liczniki CSS nie są niczym nowym i są supported from IE8 itself.

#wrapper { 
 
    counter-reset: line-number; 
 
} 
 
.line { 
 
    counter-increment: line-number; 
 
} 
 
.line:before { 
 
    content: counter(line-number)": "; 
 
}

<div id="wrapper"> 
 
    <div class="line">asdf</div> 
 
    <div class="line">asdfasdf</div> 
 
    <div class="line">asdfasdfasdfasdf</div> 
 
    <div class="line">asdf</div> 
 
</div>

---

Możemy również ustawić style dla wartości wyjściowej, zwiększamy wartość przez liczbę ponad 1, zacznij od wartości bazowej wielu innym niż 0 itd

.wrapper { 
 
    counter-reset: line-number 2; /* specifying a number in counter-reset means set the starting value as that number */ 
 
} 
 
.line { 
 
    counter-increment: line-number 2; /* specifying a number in counter-increment means increment the counter by that much every time */ 
 
} 
 
.line:before { 
 
    content: counter(line-number, lower-roman)": "; /* the second parameter represents the style of the output value */ 
 
} 
 

 
#wrapper2.wrapper .line:before { 
 
    content: counter(line-number, decimal-leading-zero)": "; 
 
}

<h3>Lower Roman Style with Base Value as 2 and increments of 2</h3> 
 
<div id="wrapper" class="wrapper"> 
 
    <div class="line">asdf</div> 
 
    <div class="line">asdfasdf</div> 
 
    <div class="line">asdfasdfasdfasdf</div> 
 
    <div class="line">asdf</div> 
 
</div> 
 

 
<h3>Decimal Leading Zero Style with Base Value as 2 and increments of 2</h3> 
 
<div id="wrapper2" class="wrapper"> 
 
    <div class="line">asdf</div> 
 
    <div class="line">asdfasdf</div> 
 
    <div class="line">asdfasdfasdfasdf</div> 
 
    <div class="line">asdf</div> 
 
</div>