Hi,
Working from the html I used in my last post you can just set the pseudo :before element on the .arrow class only.
Then remove the arrow from the flow with absolute positioning and shift it left.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Page</title>
<style>
table {
margin: 1em 2em;
border-collapse: collapse;
}
td, th {
border: 1px solid #000;
padding: 4px;
}
th[scope="row"] {
text-align:left;
background:#eee;
}
th.arrow::before {
content:'\27A4';
color: red;
position: absolute;
margin-left:-1.5em;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th scope="col">Product</th>
<th scope="col">Description</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Men's Bathrobe</th>
<td>Heavy, good for Winter...</td>
<td>$35.99</td>
</tr>
<tr>
<th class="arrow" scope="row">Fuzzy Slippers</th>
<td>Warm, cozy slippers...</td>
<td>$19.99</td>
</tr>
</tbody>
</table>
</body>
</html>