将箭头指向特定表格行旁边

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

<td style=" text-align: left;">$15.00 <span class="arrow">&#8601</span></td>

https://jsfiddle.net/eceen7z4/

Answer 2

您可以使用nth-child属性，例如：

.arrow2 TR:nth-child(2) TD:nth-child(2):after {
  color: red;
  content: "↙";
}

<table class="arrow2">
    <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>
  </table>

Answer 3

你也可以使用伪元素：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>