Making an entire block of content clickable when a child is a hyperlink (accessible block links for card-type layouts)

Given this HTML structure, I need to make the entire <article> clickable (imagine a card-type layout):

    
Title
    
Sub title
    
Description of sorts.
    Details

To make a semantic, accessible block link, use the following CSS, which builds an absolutely-positioned pseudo-element after the link which covers the entire contents of the parent, the article:

article {
    position: relative;
}

article a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

Feedback?

Email us at enquiries@kinsa.cc.