Add _content:_ on the side of a table row

Custom CSS & Theme Design
1

Hi, I would like to outline a specific row in a table by using text on the side.

For a specific row I would like an asterisk to appear on the right or the left, without stealing anything from the width of the table, the symbol should simply be pinned outside inline with the row.

I have browsed many CSS docs and references online without any luck so far.

I think that the most appropriate way to achieve this is to use content: "*" like so

<table>
<thead>
<tr>
	<td>First point</td>
	<td>adjective</td>
	<td>details</td>
</tr>
</thead>
<tbody>
<tr>
	<td>Dog</td>
	<td>hairy</td>
	<td>woof woof</td>
</tr>
<tr class="outline">
	<td>Cat</td>
	<td>cute</td>
	<td>miao</td>
</tr>
<tr>
	<td>Duck</td>
	<td>round</td>
	<td>quack</td>
</tr>
</tbody>
</table>

.outline {
content:"*";
}

my problem is the positioning, as far as I can tell both float: <anything> and position: <anything> are not producing anything close to what I’m looking for.

Thanks in advance.

2

Would this work?

/* Style for outlining a specific row */
tr.outline {
    position: relative; /* Ensures pseudo-element is positioned relative to the row */
}

tr.outline::after {
    content: "*";
    position: absolute;
    right: -15px; /* Distance from the table */
    top: 50%;
    transform: translate(-50%); /* Centers the asterisk vertically */
    font-size: 18px;
    color: red;
}

Cheers, Marko :nerd_face:

3

Thank you,
it works for the “right” case, if I want the asterisk on the left, even after correcting for the orientation it does not render properly.

4

I am not an expert on this topic, but to have it “before”, you would need to add a column; otherwise, it will shift the entire row (with an asterisk) to the right.

With this one, I don’t know how to help you :frowning:

Cheers, Marko :nerd_face:

5

ok, thank you for your answer