Css 锚定覆盖整个DIV-但有挑战，没有javascript

我正在做一个小小的设计挑战，现在它正在战胜我

本质上，它是一张材料设计卡，这意味着当我点击它时，它会把我带到其他地方

简单的方法是（现在也是这样）用一个锚来围绕内容。然而，在这种情况下，我只希望锚文本是“我的关键字”

以下是简单的html输出：

<a class="post-card md-card">
    <div class="md-card-title aspect-16x9">
        <div class="title-large"></div>
    </div>
    <div class="md-card-content">
        <div class="sup-text"></div>
    </div>
</a>

因此，我需要保持关键字文本的位置，但使整个事情可点击

我一直在玩弄这样一个想法：在顶部放置一个绝对定位的锚，我可以这样做，但如果不移动文本，我无法让锚延伸到底部

---

任何CSS大师都有一些想法吗？

这将为您提供一个良好的起点

。明信片{
背景色：#63d9ff；
框大小：边框框；
位置：相对位置；
宽度：200px；
}
.明信片*{
框大小：继承；
}
.明信片.明信片名称{
底部：0；
左：0；
位置：绝对位置；
右：0；
文本对齐：居中；
排名：0；
}
.post card.md card title.content prop，
.post card.md card title.content{
显示：内联块；
垂直对齐：中间对齐；
}
.post card.md card title.content prop{
垫顶：56%；
宽度：0；
}
.post card.md card title.content{
填充：1rem；
宽度：100%；
}
.明信片.太空道具{
显示：块；
垫顶：56%；
}
.md卡内容{
背景颜色：灰色；
填充：1rem；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。在这本书中，莫里斯和厄洛斯在利奥的生活中发挥了重要作用。

这将为您提供一个良好的起点

。明信片{
背景色：#63d9ff；
框大小：边框框；
位置：相对位置；
宽度：200px；
}
.明信片*{
框大小：继承；
}
.明信片.明信片名称{
底部：0；
左：0；
位置：绝对位置；
右：0；
文本对齐：居中；
排名：0；
}
.post card.md card title.content prop，
.post card.md card title.content{
显示：内联块；
垂直对齐：中间对齐；
}
.post card.md card title.content prop{
垫顶：56%；
宽度：0；
}
.post card.md card title.content{
填充：1rem；
宽度：100%；
}
.明信片.太空道具{
显示：块；
垫顶：56%；
}
.md卡内容{
背景颜色：灰色；
填充：1rem；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。在这本书中，莫里斯和厄洛斯在利奥的生活中发挥了重要作用。

因此，基本上你真的不想只使用javascript为你点击并从锚中获取href。你希望整个内容都是可点击的，但不希望整个内容都是链接？为什么？这是一种矛盾的要求。@moped-是的，这些链接专门针对内部链接，所以没有什么可以阻挡。@keithjgrant-它们并不矛盾。我想告诉谷歌，该页面是专门关于我的“我的关键字”，没有额外的废话。因为它是一张没有额外功能的材质卡，理想情况下，整个东西都应该是可点击的目标。@JohnOhara，真有趣。这真的会影响你的搜索引擎优化吗？所以基本上你真的想避免仅仅使用javascript为你点击并从锚中获取href。你希望整个东西都是可点击的，但你不希望整个东西都是链接？为什么？这是一种矛盾的要求。@moped-是的，这些链接专门针对内部链接，所以没有什么可以阻挡。@keithjgrant-它们并不矛盾。我想告诉谷歌，该页面是专门关于我的“我的关键字”，没有额外的废话。因为它是一张没有额外功能的材质卡，理想情况下，整个东西都应该是可点击的目标。@JohnOhara，真有趣。这真的会影响你的搜索引擎优化吗？哈哈，猜猜迈克尔呢？我刚刚提出了相同的解决方案。然而，正如你已经发布的，我知道这个代码是有效的，我会接受这个答案。哈哈，猜猜迈克尔是怎么回事？我刚刚提出了相同的解决方案。然而，正如你已经发布的，我知道这个代码是有效的，我会接受这个答案。

.AspectRatio(@widthRatio:16; @heightRatio:9; @useableWidth:100%) {
    &:extend(.clearfix all);
    
    overflow:hidden;
    max-width:@useableWidth;

    &::before {
        content:"";
        float:left;
        padding-top:percentage(@heightRatio / @widthRatio);
    }
}