Chris_F Chris_F - 5 months ago 11
CSS Question

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

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:

Image example of what I would like to accomplish.

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

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>