Apply Stackoverflow-like highlighting to a table row

Question

I would like to replicate the internal linking behaviour of StackExchange sites: assuming I have this in my page:

<table>
  <tr><td><a name="1"></a>1</td></tr>
  <tr><td><a name="2"></a>2</td></tr>
  <tr><td><a name="3"></a>3</td></tr>
</table>

and a link in the same page

<a href="#2">link</a>

I want the second row to get highlighted briefly. How does it work?

An example of the desired highlighting could be seen e.g. when clicking here.

CSS `:target` pseudo-class. Stick a simple animation on that and job done. — Niet the Dark Absol, Oct 09 '17 at 16:54
@NiettheDarkAbsol, could you maybe post it as an answer with a short example? — texnic, Oct 09 '17 at 17:08

score 0 · Accepted Answer · answered Oct 10 '17 at 09:48

Based on comment by @NietTheDarkAbsol and another answer I've found, here is the solution to linked row in table

<style>
    :target {
        animation: highlight 2000ms ease-out;
    }
    @keyframes highlight {
        0% {
            background-color: darkorange;
            }
        100% {
            background-color: white;
            }
    }

</style>

<table>
   <tr id="1"><td>1</td></tr>
   <tr id="2"><td>2</td></tr>
   <tr id="3"><td>3</td></tr>
</table>

<a href="#1">link</a>
<a href="#2">link</a>
<a href="#3">link</a>

JSFiddle: https://jsfiddle.net/2vac8crd/1

Apply Stackoverflow-like highlighting to a table row

1 Answers1