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

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">
    <img class="thumbnail" alt="thumbnail" src="/media/image/image_path">

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


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.