Jak uzyskać wcięcie po :: before pseudo element?

Question

Mam tabelę i chcę użyć CSS :: before pseudo element z licznikiem, aby dodać numer wiersza do pierwszego td każdego wiersza. Mój problem polega na tym, że jeśli pierwszy td zawija, druga linia zaczyna się pod tym numerem i chciałbym, żeby zaczął on wstawiać tekst nad nim. Czy można to zrobić za pomocą samego CSS?

Przykład:

Edit

https://jsfiddle.net/3yL19zde/

HTML:

<table> 
    <tr> 
    <td>Some really long text that wraps to a second line...</td> 
    <td>Some other column</td> 
    <td>A third column</td> 
    </tr> 
    <tr> 
    <td>Some really long text that wraps to a second line...</td> 
    <td>Some other column</td> 
    <td>A third column</td> 
    </tr> 
</table> 

CSS:

table { 
    width: 480px; 
} 

table td { 
    vertical-align: text-top; 
} 

table tr { 
    counter-increment: rowNumber; 
} 

table tr td:first-child::before { 
    content: counter(rowNumber); 
    min-width: 1em; 
    margin-right: 0.5em; 
    font-weight: bold; 
} 

Answer 1

będzie włożeniu Pseudoelement na początku wiersza a nie wewnątrz pierwszej komórki, tak, że może być wyświetlona w postaci niezależnego table-cell:

table { 
 
    width: 500px; 
 
} 
 
tr { 
 
    counter-increment: row; 
 
} 
 
tr::before { 
 
    content: counter(row); 
 
    display: table-cell; 
 
    font-weight: bold; 
 
} 
 
tr::before, td { 
 
    border: 1px dotted #888; 
 
    padding: 5px; 
 
}

<table> 
 
    <tr> 
 
    <td>Some really long text that wraps to a second line...</td> 
 
    <td>Some other column</td> 
 
    <td>A third column</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Some really long text that wraps to a second line...</td> 
 
    <td>Some other column</td> 
 
    <td>A third column</td> 
 
    </tr> 
 
</table>

Answer 2

Oto sposób, aby to zrobić w tej samej komórce (używając text-indent i niektórych dopełnień).

table { 
 
    counter-reset: rowNumber; 
 
    width: 480px; 
 
} 
 
td { 
 
    border: 1px dotted #888; 
 
} 
 
td:first-child { 
 
    padding-left: 2em; 
 
    text-indent: -2em; 
 
} 
 
td:first-child:before { 
 
    counter-increment: rowNumber; 
 
    content: counter(rowNumber); 
 
    font-weight: bold; 
 
    display: inline-block; 
 
    text-indent: 0; 
 
    width: 2em; 
 
}

<table> 
 
    <tr> 
 
     <td>Some really long text that wraps to a second line...</td> 
 
     <td>Some other column</td> 
 
     <td>A third column</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some really long text that wraps to a second line...</td> 
 
     <td>Some other column</td> 
 
     <td>A third column</td> 
 
    </tr> 
 
</table>