CODEWITHSUNDEEP
htmlcss
Adis
Adis

Reputation: 13

How to add <a> to this element

Okay so I have a really interesting bug,

I'm using a navigation. This is pure HTML & CSS.

However it has a lot of pseudo properties and because of that I cannot use the tag in that div.

 <div class='box curmudgeon'>
    <a href="#" class="nocolorrr">Housing</a>
    </div>

So the link won't work due to the pseudo properties,

  .box:hover {
  border: 2px solid rgba(0,160,80,0);
  color: #FFF;
}

.box::before, .box::after {
  width: 100%;
  height:100%;
  z-index: 3;
  content:'';
  position: absolute;
  top:0;
  left:0;
  box-sizing: border-box;
  -webkit-transform: scale(0);
  transition: 0.5s;

}


.curmudgeon::before {
  border-bottom: 3px solid #FFF;
  border-left: 0;
  -webkit-transform-origin: 0% 100%;
}

.curmudgeon::after {
  border-top: 0;
  border-right: 0;
  -webkit-transform-origin: 50% 50%;
}

.box:hover::after, .box:hover::before {
  -webkit-transform: scale(1);
}

Is there any fix? I have tried many things so far and have failed miserable. This is a new doubt for me

Upvotes: 1

Views: 38

Answers (1)

Asons
Asons

Reputation: 87313

Give the link a z-index higher than 3, and for z-index to work, it also need a position other than static, i.e. position: relative.

.box a {                      /*  added rule  */
  position: relative;
  z-index: 4;
}

.box:hover {
  border: 2px solid rgba(0, 160, 80, 0);
  color: #FFF;
}

.box::before,
.box::after {
  width: 100%;
  height: 100%;
  z-index: 3;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  -webkit-transform: scale(0);
  transition: 0.5s;
}

.curmudgeon::before {
  border-bottom: 3px solid #FFF;
  border-left: 0;
  -webkit-transform-origin: 0% 100%;
}

.curmudgeon::after {
  border-top: 0;
  border-right: 0;
  -webkit-transform-origin: 50% 50%;
}

.box:hover::after,
.box:hover::before {
  -webkit-transform: scale(1);
}
<div class='box curmudgeon'>
  <a href="#" class="nocolorrr">Housing</a>
</div>

Upvotes: 3

Related Questions