向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> 

任何帮助将是真棒。

Emily。

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>