Tengo un enlace ancla en un menú con un icono encima. Lo necesito para que cuando alguien haga clic en el elemento del menú o en el pseudo elemento que se encuentra encima y que contiene el icono, el enlace funcione.
Tengo un codepen aquí: http://codepen.io/emilychews/pen/wJrqaR
El cuadrado rojo es el pseudo elemento que contendrá el icono.
El código es:
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>Cualquier ayuda sería increíble.
Emily.
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>