How to Make an Anchor Link Fill/Overlay its Parent Element

John on August 29, 2020

Sometimes you need an anchor link to fill the area of its parent element. One example of this might be when you have a thumbnail image and a heading in the same div with an anchor link to a page within the heading. It's better for search engines to see a link with just the heading text but it will be easier for a user to click somewhere on the div containing the thumbnail and heading.

HTML for the above scenario might look something like this:

<div class="item-tile">
  <div>
    <img class="thumbnail" alt="thumbnail" src="/media/image/image_path">
  </div>

  <div class="item-meta">
    <h3><a href="/post-slug" class="anchor-block-overlay">Post Heading</a></h3>
  </div>
</div>

Add a class to the anchor link with an appropriate name such as anchor-block-overlay (as you can see in the above example.)

<h3><a href="/post-slug" class="anchor-block-overlay">Post Heading</a></h3>

Then, apply a position: relative; CSS rule to the parent div.

.item-tile {
  position: relative;
}

Then apply a position: absolute; and z-index: 1; CSS rule to the ::after HTML pseudo-element.

.anchor-block-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

And now the anchor will expand to each side of the relative parent and your anchor text will remain in the same place. Don't forget the content:''; must be there for ::after to work.