如何将一组链接(在卡片中)转换为标题上的一个链接？

Question

我有一张卡里面有3个链接(与相同的网址)，这是不好的搜索引擎优化。我希望只有一个链接的标题(H3)，但保持所有的卡可点击。在css中是可能的吗？

<article class="overflow-hidden transition-shadow duration-300 rounded">
  <%= link_to post_path(post.slug),aria: {label:'article'}, class: "inline-block text-black no-underline transition-colors duration-200 hover:text-deep-purple-accent-700" do %>
    <%= image_tag photo(post, 400, 400), class:"object-cover w-full h-64 rounded-lg"%>
  <% end %>

  <div class="py-2">
    <%= link_to post_path(post.slug), aria: {label:'article'}, class: "inline-block mb-3 text-black no-underline transition-colors duration-200 hover:text-deep-purple-accent-700" do %>
      <h3 class="text-2xl font-bold leading-5"><%= post.title %></h3>
    <% end %>
    <span class="absolute bg-gray-500 text-white right-4 top-4 py-1 px-2 flex rounded-lg">
      <svg>...</svg>
      <%= post.reading_time %> min
    </span>

    <p class="mb-4 text-gray-700"><%= post.meta_description %></p>
    <div class="flex space-x-4">
      <%= link_to post_path(post.slug),aria: {label:'article'}, class: "flex items-start text-gray-800 transition-colors duration-200 hover:text-deep-purple-accent-700 group" do %>
        <div class="mr-2">
          <svg>....</svg>
        </div>
        <p class="font-semibold"><%= post.comments_count %></p>
      <% end %>
    </div>
  </div>
</article>

Answer 1

是的，你可以使用CSS来做这件事。只需复制下面给定的CSS并在<a>标记中使用它。通过使用这个，所有的父div区域将作为一个可点击的链接。

​

.stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
}

<div>
    <h1>I am not anchor tag.</h1>
    <h2>I am not anchor tag.</h2>
    <h3>I am not anchor tag.</h3>
    <a href="#" class="stretched-link">I am an anchor tag</a>
</div>

​