Как правильно отображать содержимое в image :: before и image :: after для всех браузеров

Я использую следующий код HTML

<table>
<tr>
    <td class="x-grid-cell" style="width:35px;">
        <div unselectable="on" class="x-grid-cell-inner x-grid-cell-inner-action-col" style="text-align:left;">
            <img role="button" alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-grid-notecolumn x-grid-notecolumn-unchecked">
        </div>
    </td>
</tr>

with some CSS Pseudo Classes for the image tag inside. See Jsfiddle. Why do my Icons not appear in IE and Firefox but only in Chrome. What should I do for cross-browser, what exactly is the bad markup? I cannot change the HTML markup.