javascript - 将 anchor 链接添加到 Div 及其伪元素(CSS 或 Javascript/jQuery)

Question

我在菜单上有一个 anchor 链接，上面有一个图标。我需要它，以便当有人单击菜单项或它上面带有图标的伪元素时，链接会起作用。

我这里有一个代码笔:http://codepen.io/emilychews/pen/wJrqaR

红色方 block 是将包含图标的伪元素。

代码是:

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>