How to set pReorderableRowHandle for ::before inside td?

Question

I see that PrimeNG set pReorderableRowHandle for a span tag in their example. However, I need to show a handle on the left of rows when I hover them, then use it to re-order row. I used ::before for the first td tags of rows to show handles, but I'm stuck here that I cannot set pReorderableRowHandle for ::before.

 tr td:first-child::before {
   content: '';
   background: #999;
   position: absolute;
   display: none;
 }
 tr:hover td:first-child::before {
   display: block;
 }

Screenshots: https://i.stack.imgur.com/f98qP.png