How to style the targeted URL fragment in Angular?

How do we style the :target in Angular?

For when we navigate to e.g. /categories/11#footnote-3, which opens the page for the details of category 11 and scrolls down to the element with id footnote-3.

Details

Linking to fragments


In Angular it's possible to link to a page fragment with:

<p>
See the <a routerLink="/categories/11" fragment="footnote-3>footnote</a>.
</p>
<p id="footnote-3">
Lorem ipsum…
</p>

How to style the linked fragment?


But how to style that target?

With css it should be possible to do this:

:target {
outline: dashed 1px;
}


But this style seems to only be applied briefly when the page is reloaded, and then disappears.

Continue reading...