Divとその擬似要素（CSSまたはJavascript/jQuery）にアンカーリンクを追加します。

Question

メニューの上にアンカーリンクがあります。誰かがメニュー項目をクリックするか、アイコンを保持している擬似要素をクリックすると、リンクが機能するようになります。

私はここcodepenいる：http://codepen.io/emilychews/pen/wJrqaR

赤い四角は、アイコンを保持する擬似要素です。

コードは次のとおりです。

CSS

.menu{ 
position: relative; 
left: 50px; 
top: 50px; 
height: 30px; 
width: 100px; 
background: blue; 
line-height: 30px; 
text-align: center; 
} 

.menu:before { 
content:''; 
position: absolute; 
width: 100%; 
height: 100%; 
background: red; 
bottom: 40px; 
right: 0px; 
} 

.menu-item1 a {color: white; text-decoration: none;} 

HTML

<div class="menu menu-item1"><a href="//google.com">Menu Item</a></div> 

すべてのヘルプは素晴らしいだろう。

エミリー。

Answer 1

a { 
 
    position: relative; 
 
    display: inline-block; 
 
    left: 50px; 
 
    top: 50px; 
 
    height: 30px; 
 
    width: 100px; 
 
    background: blue; 
 
    line-height: 30px; 
 
    text-align: center; 
 
    color: white; 
 
    text-decoration: none; 
 
} 
 

 
a:before { 
 
    content:'icon'; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: red; 
 
    bottom: 40px; 
 
    right: 0px; 
 
}

<div class="menu"> 
 
    <a href="//google.com">Google</a> 
 
    <a href="//yandex.com">Yandex</a> 
 
</div>