css - 指向特定表格行旁边的箭头

Question

如何将箭头指向“此处”行？

我试过将它放在 td 标签中，但使行变大了。 https://jsfiddle.net/6vx6033y/

<table cellpadding="4" cellspacing="0" border="0" align="center">
    <tr>
        <td style=" text-align: right;">test:</td>
         <td style=" text-align: left;">-$15.00</td>
     </tr>
    <tr>
        <td style=" text-align: right;">test:</td>
        <td style=" text-align: left;">here</td>

    </tr>
    <tr>
        <td style=" text-align: right;">test:</td>
        <td style=" text-align: left;">$15.00 </td>

    </tr>
    <div class="arrow">&#8601;</div>
  </table>

Answer 1

你也可以使用伪元素:https://jsfiddle.net/6vx6033y/1/

tr.arrow:after {
  content:' 	\2199';
  position:absolute;
  font-size:1.5em;
  color:red
}
td {
  border:solid;
}

<table cellpadding="4" cellspacing="0" border="0" align="center">
    <tr>
        <td style=" text-align: right;">test</td>
         <td style=" text-align: left;">-$15.00</td>
     </tr>
    <tr>
        <td style=" text-align: right;">test:</td>
        <td style=" text-align: left;">$0.00</td>
        
    </tr>
    <tr class="arrow">
        <td style=" text-align: right;">test:</td>
        <td style=" text-align: left;">$15.00 </td>
    </tr>
    <tr>
        <td style=" text-align: right;">tset:</td>
        <td style="text-align: left;">$0.00</td>
    </tr>
</table>