How can I make an anchor element cover an entire div element?

October 31, 2022

I want when clicking anywhere on the div.parent to act as a link without including the tag in the entire div.des

I try to many times but unable to do it.

div.parent {
  background-color: gray;
  padding: 5px;
}

a {
  width: 100px;
  height: 100px;
  display: block;
  background-color: white
}

<div style="display: flex;justify-content: center;gap: 20px">
  <div class="parent">
    <a href="#"></a>
    <div class="des">
      <p>Title</p>
      <i>Price</i>
    </div>
  </div>

  <div class="parent">
    <a href="#"></a>
    <div class="des">
      <p>Title</p>
      <i>Price</i>
    </div>
  </div>
</div>

>Solution :

If you don’t want to just wrap your div with the anchor we can learn from Bootstrap’s stretched links and use an absolutely-positioned pseudo-element on the anchor.

div.parent {
  background-color: gray;
  padding: 5px;
  position: relative;
}

a {
  width: 100px;
  height: 100px;
  display: block;
  background-color: white
}

a::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div style="display: flex;justify-content: center;gap: 20px">
  <div class="parent">
    <a href="#"></a>
    <div class="des">
      <p>Title</p>
      <i>Price</i>
    </div>
  </div>

  <div class="parent">
    <a href="#"></a>
    <div class="des">
      <p>Title</p>
      <i>Price</i>
    </div>
  </div>
</div>