如何在没有jQuery或JavaScript的情况下将"a"链接扩展到整个div？

Question

有两个div，每个div都有一个图像和超链接。目标是强制每个div是一个完整的超链接-不需要jQuery, JavaScript或Onclick函数。

我现在有什么了:

.near {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}
.previous,
.next {
  width: 50%;
  padding: 20px 30px;
  font-size: 1em;
  font-style: italic;
  font-weight: 400;
  cursor: pointer;
  align-items: center;
  display: flex;
  text-align: center;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 1px #5C3317;
}
.previous:hover,
.next:hover {
  box-shadow: 0 0 10px #5C3317;
  background: lightgreen;
}
.previous a,
.next a {
  color: #000;
}
.previous i {
  float: left;
  padding-right: .7em;
  align-self: center;
}
.next i {
  float: right;
  padding-left: .7em;
  align-self: center;
}
.text {
  width: 100%;
}

<script src="https://use.fontawesome.com/d91d412715.js"></script>
<div class="near">
  <div class="previous">
    <i class="fa fa-hand-spock-o fa-3x" aria-hidden="true"></i>
    <div class="text">
      <a href="http://google.com/">Hello</a>
    </div>
  </div>
  <div class="next">
    <div class="text">
      <a href="http://google.com/">Bye-bye</a>
    </div>
    <i class="fa fa-bicycle fa-3x" aria-hidden="true"></i>
  </div>
</div>

我怎么能找到这个?

Answer 1

您可以看到我所做的更改，因为它们是向左缩进的CSS规则。简而言之，你需要使字体令人敬畏的图标绝对定位，使链接元素可以占用整个框区域。

.near {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}
.previous,
.next {
  width: 50%;
  padding: 0;
  font-size: 1em;
  font-style: italic;
  font-weight: 400;
  cursor: pointer;
  align-items: center;
  display: flex;
  text-align: center;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 1px #5C3317;
}
.previous:hover,
.next:hover {
  box-shadow: 0 0 10px #5C3317;
  background: lightgreen;
}
.previous a,
.next a {
  color: #000;
display: block;
padding: 40px 60px;
}
.previous i {
  float: left;
  padding-right: .7em;
  align-self: center;
position: absolute;
top: 35px;
left: 35px;
}
.next i {
  float: right;
  padding-left: .7em;
  align-self: center;
position: absolute;
top: 35px;
right: 35px;
}
.text {
  width: 100%;
z-index: 2;
}

<script src="https://use.fontawesome.com/d91d412715.js"></script>
<div class="near">
  <div class="previous">
    <i class="fa fa-hand-spock-o fa-3x" aria-hidden="true"></i>
    <div class="text">
      <a href="http://google.com/">Hello</a>
    </div>
  </div>
  <div class="next">
    <div class="text">
      <a href="http://google.com/">Bye-bye</a>
    </div>
    <i class="fa fa-bicycle fa-3x" aria-hidden="true"></i>
  </div>
</div>