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

6

Sorry for getting a little late to the game, but I tried with this markdown table:

| First point | Adjective | Details   |
| ----------- | --------- | --------- |
| Dog         | hairy     | woof woof |
| Cat #circle | cute      | miao      |
| Duck        | round     | quack     |

And this CSS:

tr:has([href="#circle"]) {
  & [href="#circle"] {
    display: none;
  }
  
  & td:nth-child(1) {
      background-color: yellow; 
      &::before { 
        position: absolute;
        left: 15px; 
        content: "*";
        background-color: blue;
      }
    }  
}

Which produced this output:

image

As can be seen, the asterix is placed on the outside of everything and style according to my bad design… :stuck_out_tongue:

The trick I used to achieve this is through adding a specific tag to the markup table, so as to have something to select into for the CSS, and then I fiddled around with the CSS till I got something resembling what I imagine you’re wanting. And since I don’t really care to show my anchor tag I just hid it from the output.

Hopefully this gives you some ideas related to how you could move forward.

1 Like