jQueryやJavaScriptを使用せずにa-linkをdiv全体に展開する方法は？

Question

それぞれに画像とハイパーリンクを持つdivが2つあります。目標は、各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>