How do you get an indentation after ::before pseudo element?

Question

I have a table and I want to use the CSS ::before pseudo element with a counter to add a row number to the first td of every row. My issue is that if the first td wraps the second line starts under the number, and I would like it to start inline with the text above it. Can this be done with just CSS?

Example:

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

I would insert the pseudo-element at the beginning of the row instead of inside the first cell, so that it can be displayed as an independent 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>