Border highlighting on hover

by steveukx

HTML

<table>
    <tr><td>hello</td></tr>
    <tr><td>hello</td></tr>
    <tr><td>hello</td></tr>
</table>

<ul>
    <li>hello</li>
    <li>hello</li>
    <li>hello</li>
</ul>

CSS

* { font: 10pt/1 sans-serif; box-sizing: border-box; }

table { border-spacing: 0; width: 100px; }
tr { }
td { border: 3px solid red; border-bottom-style: none; padding: 0.5rem; }
tr:last-child td { background: green; border-bottom: 3px solid red; }

tr:hover td { border-color: blue; background: grey; cursor: pointer; }
tr:hover + tr td { border-top-color: blue; }

ul { padding: 0; list-style-type: none; width: 100px; }
li { padding: 0.5rem; margin: 3px; margin-bottom: 0; position: relative; display: block; background: grey; }
li:last-child { margin-bottom: 3px; }
li:after { content: ""; position: absolute; top: -3px; right: -3px; left: -3px; bottom: -3px; border: 3px solid red; }
li:hover:after { z-index: 1; border-color: blue; }