添加锚 link 到 Div 及其伪元素（CSS 或 Javascript / jQuery）

Question

我在菜单上有一个锚 link，上面有一个图标。我需要它，以便当有人单击菜单项或其上方持有图标的伪元素时，link 起作用。

我这里有一个代码笔：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>

添加锚 link 到 Div 及其伪元素（CSS 或 Javascript / jQuery）

Add an Anchor link to a Div AND its Pseudo Element (CSS or Javascript / jQuery)

javascript

css

anchor

jquery

pseudo-element