Hyperlink kombiniert mit Pseudocode

Question

Wie kann ich im folgenden Code die gleiche Schriftfarbe für die Hyperlinks wie für den anderen Text haben? Es scheint nun mit der Farbe zu morphen, wie sie im Pseudocode definiert ist.

ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
a, a:link, a:visited, a:active { 
 
    text-decoration: none; 
 
    color: #484693; 
 
} 
 

 
nav { 
 
    color: #484693; 
 
    font-weight: bold; 
 
    width: calc(100% - 5vw); 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
nav>ul { 
 
    display: flex; 
 
    align-items: center; 
 
    width: 100%; 
 
    justify-content: space-around; 
 
} 
 

 
nav>ul>li { 
 
    margin-right: 2em; 
 
} 
 

 
nav>ul>li.header-button { 
 
    position: relative; 
 
    padding: 1em; 
 
} 
 

 
nav>ul>li.header-button::before { 
 
    content: ''; 
 
    width: 100%; 
 
    height: 70%; 
 
    background: rgba(255, 25, 255, 0.4); 
 
    border: thin solid rgba(255, 25, 255, 0.4); 
 
    border-radius: 20px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 0; 
 
    transform: translateY(-50%); 
 
}

<nav> 
 
    <div class="header-logo"> 
 
    <a href="#"><img src="http://via.placeholder.com/50x50" alt="" /></a> 
 
    </div> 
 
    <ul> 
 
    <li>Option1</li> 
 
    <li>Option2</li> 
 
    <li class="header-button"><a href="#">Option3</a></li> 
 
    <li class="header-button"><a href="#">Option4</a></li> 
 
    </ul> 
 
</nav>

Answer 1

Das Problem, das Sie haben, ist das Pseudo-Element, das Sie den Hintergrund erstellen verwenden, ist auf dem Anker-Tag kommt, da Sie absolute position an die Pseudo-Element gegeben haben. Sie können dies überwinden, indem Sie dem Anker-Tag position relative zuweisen und ihm z-index zuweisen.

ARBEITS DEMO:

ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
a, a:link, a:visited, a:active { 
 
    text-decoration: none; 
 
    color: #484693; 
 
} 
 

 
nav { 
 
    color: #484693; 
 
    font-weight: bold; 
 
    width: calc(100% - 5vw); 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
nav>ul { 
 
    display: flex; 
 
    align-items: center; 
 
    width: 100%; 
 
    justify-content: space-around; 
 
} 
 

 
nav>ul>li { 
 
    margin-right: 2em; 
 
} 
 

 
nav>ul>li.header-button { 
 
    position: relative; 
 
    padding: 1em; 
 
} 
 

 
nav>ul>li.header-button::before { 
 
    content: ''; 
 
    width: 100%; 
 
    height: 70%; 
 
    background: rgba(255, 25, 255, 0.4); 
 
    border: thin solid rgba(255, 25, 255, 0.4); 
 
    border-radius: 20px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 0; 
 
    transform: translateY(-50%); 
 
} 
 

 
nav>ul>li a { 
 
    position: relative; 
 
    z-index: 1; 
 
}

<nav> 
 
    <div class="header-logo"> 
 
    <a href="#"><img src="http://via.placeholder.com/50x50" alt="" /></a> 
 
    </div> 
 
    <ul> 
 
    <li>Option1</li> 
 
    <li>Option2</li> 
 
    <li class="header-button"><a href="#">Option3</a></li> 
 
    <li class="header-button"><a href="#">Option4</a></li> 
 
    </ul> 
 
</nav>

Answer 2

Genau dies zu Ihrem CSS hinzufügen, so würde Ihr Element unter Ihrem Text sein.

nav>ul>li.header-button::before { 
    z-index: -1; 
} 

Answer 3

Ihre :before ist übertrieben und seine halbtransparenten „zurück“ Boden überlappt die tatsächliche Linkfarbe (da es absolut positioniert ist ...).

Sie brauchen das nicht. Sie könnten nach dem Z-Index korrigieren, aber besser diesen Hintergrund direkt und viel natürlicher auf Ihren Links. (Was willst du anklickbar sein, oder?). Und wahrscheinlich wollen Sie eine innere Spanne für Ihre Nicht-Links haben, gleiche Polsterung und Raum, um sicherzustellen, dass:

<nav> 
    <div class="header-logo"> 
    <a href="#"><img src="http://via.placeholder.com/50x50" alt="" /></a> 
    </div> 
    <ul> 
    <li><span>Option1</span></li> 
    <li><span>Option2</span></li> 
    <li class="header-button"><a href="#">Option3</a></li> 
    <li class="header-button"><a href="#">Option4</a></li> 
    </ul> 
</nav> 

css:

ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

a, a:link, a:visited, a:active { 
    text-decoration: none; 
    color: #484693; 
} 

nav { 
    color: #484693; 
    font-weight: bold; 
    width: calc(100% - 5vw); 
    display: flex; 
    align-items: center; 
} 

nav ul { 
    display: flex; 
    align-items: center; 
    width: 100%; 
    justify-content: space-around; 
} 

nav ul li { 
    margin-right: 2em; 
} 

nav ul li a, nav ul li span { 
    padding: 10px; 
} 
nav ul li a { 
    background: rgba(255, 25, 255, 0.4); 
    border: thin solid rgba(255, 25, 255, 0.4); 
    border-radius: 20px; 
} 

nav ul li.header-button { 
    position: relative; 
    padding: 1em; 
} 

Sieht like this:

BTW, fast sicher werden Sie wetten ter von mit display:table für Ihre <ul>, display: table-cell für Ihre li. Flex ist sicherlich übertrieben ...