I think this is not possible with pure CSS. Your options could be:

• to use HTML and set the link’s tabindex to -1
• to use JavaScript

The first option kind of solves the problem without using JavaScript, but is at the same time not good for the accessibility of your content. So in the end, the JavaScript is probably the best tool for this.

I have managed to fade-out the page after a link is clicked. But the page also fade-out when a link receives :focus (obviously).

I wonder if there is (or will soon come) an :active-within or :child-clicked pseudo-event for CSS.

.app:focus-within{transition:opacity 1s ease-in;opacity:0}

Do you have good suggestion to achieve the goal?

.app:focus-within{transition:opacity 1s ease-in;opacity:0}

<div style="width:250px;max-width:100%;outline:1px solid #f006;margin:2rem">
<div class="app" style="background:#edf;padding:1em">
<p>Lorem ipsum <a href="#">dolor sit amet</a>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>