Table dark mode pseudo element blocking users interaction

[SecretBase]

Describe the bug Table dark mode pseudo element blocking users interaction

To Reproduce

1. Open storybook
2. Go to table and click .is-dark checkbox
3. Modify the story/table/table.template.js as below

   <div class="nes-container">
   <input id="first-input" type="text"/>
   <p>this is some text for select demo</p>
   <table class="nes-table ${tableClasses}" style="margin:15px 4px 5px 4px">
   <thead>
     <tr>
       <th>Table.is-dark</th>
       <th>Table.is-bordered</th>
       <th>Table.is-centered</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>Thou hast had a good morning</td>
       <td>Thou hast had a good afternoon</td>
       <td><input id="second-input" type="text"/></td>
     </tr>
     <tr>
       <td>Thou hast had a good morning</td>
       <td>Thou hast had a good afternoon</td>
       <td>Thou hast had a good night</td>
     </tr>
   </tbody>
   </table>
   </div>

4. The first input can't be interact (focus)
5. the <p> tag text can't be select

Expected behaviour the users should can interact with the ui such as selecting the text, focus on the input etc when table with dark mode is used.

Screenshots

Environment:

• MacOS
• Chrome 81
• node 10

Suggestion(s) for fixing this issue Remove the :before pseudo element.