将锚链接添加到 Div 及其伪元素（CSS 或 Javascript / jQuery）答案

【问题标题】：Add an Anchor link to a Div AND its Pseudo Element (CSS or Javascript / jQuery)将锚链接添加到 Div 及其伪元素（CSS 或 Javascript / jQuery）
【发布时间】：2017-08-06 17:52:30
【问题描述】：

我在菜单上有一个锚链接，上面有一个图标。我需要它，以便当有人单击菜单项或它上面持有图标的伪元素时，链接可以工作。

我这里有一个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>

任何帮助都会很棒。

艾米丽。

【问题讨论】：

使用.menu a:beforecodepen.io/anon/pen/RpLZMe

标签： javascript jquery css anchor pseudo-element

【解决方案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>

【讨论】：