Wie <a> zu diesem Element hinzufügen

Question

Okay, so dass ich eine wirklich interessante Fehler haben,

ich eine Navigation bin mit. Dies ist reines HTML & CSS.

Allerdings hat es eine Menge von Pseudo-Eigenschaften und deshalb kann ich das Tag in diesem div nicht verwenden.

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

So wird der Link nicht auf Grund der Pseudo-Eigenschaften arbeiten,

.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); 
} 

Gibt es eine Lösung? Ich habe viele Dinge bisher versucht und habe elend gescheitert. Dies ist ein neuer Zweifel für mich

Answer 1

den Link ein z-index höher als 3 Geben und für z-index zu arbeiten, sie brauchen auch eine andere Position als static, das heißt 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>