Sorting Arrow Carets

by Stephen Irving

HTML

<table>
    <thead>
        <tr>
            <th class="headerSortDown">ID</th>
            <th class="headerSortUp">Username</th>
            <th>Fullname</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>John</td>
            <td>John Doe</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jenny</td>
            <td>Jenny Smith</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Tom</td>
            <td>Tom Doe</td>
        </tr>
    </tbody>
</table>

CSS

.headerSortDown:after,
.headerSortUp:after{
    content: ' ';
    position: relative;
    left: 10px;
    border: 7px solid transparent;
}
.headerSortDown:after{
    top: 10px;
    border-top-color: silver;
}
.headerSortUp:after{
    bottom: 15px;
    border-bottom-color: silver;
}
.headerSortDown,
.headerSortUp{
    padding-left: 20px;
}