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

Question

I have an anchor link on a menu with an icon above it. I need it so that when someone clicks on either the menu item, or the pseudo element above it holding the icon, the link works.

I have a codepen here: http://codepen.io/emilychews/pen/wJrqaR

The red square is the pseudo element that will hold the icon.

The code is:

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>

Any help would be awesome.

Emily.

Use .menu a:before codepen.io/anon/pen/RpLZMe

DaniP
– DaniP

2017-03-15 19:39:37 +00:00
Commented Mar 15, 2017 at 19:39 — DaniP
– DaniP, Commented Mar 15, 2017 at 19:39

Zoltan Toth · Accepted Answer · 2017-03-15 19:42:16Z

3

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>

answered Mar 15, 2017 at 19:42

Zoltan Toth

47.8k12 gold badges132 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related