Hyperlink combined with pseudo code - css

Question

In the code below, how can I have the same font color for the hyperlinks as for the other text? It now seems to morph with the color as defined in the pseudo code.
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">
<img src="http://via.placeholder.com/50x50" alt="" />
</div>
<ul>
<li>Option1</li>
<li>Option2</li>
<li class="header-button">Option3</li>
<li class="header-button">Option4</li>
</ul>
</nav>

Answer 1

The issue you are having is the pseudo element you are using to create the background is coming on top of the anchor tag, since you have given absolute position to the pseudo element. You can overcome that by assigning position relative to the anchor tag and assign a z-index to it.
WORKING 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">
<img src="http://via.placeholder.com/50x50" alt="" />
</div>
<ul>
<li>Option1</li>
<li>Option2</li>
<li class="header-button">Option3</li>
<li class="header-button">Option4</li>
</ul>
</nav>

Answer 2

Just add this to your css, so your element would be under your text.
nav>ul>li.header-button::before {
z-index: -1;
}

Answer 3

Your :before is overdone and its semitransparent „back“ground overlaps the actual link color (since it's positioned absolute...).
You don't need that. You could fix by z-index, but better do that background directly and way more natural on your links. (Which you want to be clickable, right?). And probably you want to have an inner span for your non-links, to ensure same padding and space:
<nav>
<div class="header-logo">
<img src="http://via.placeholder.com/50x50" alt="" />
</div>
<ul>
<li><span>Option1</span></li>
<li><span>Option2</span></li>
<li class="header-button">Option3</li>
<li class="header-button">Option4</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;
}
Looks like this:
Btw, almost certainly you will be better of with display:table for your <ul>, display: table-cell for your li. Using flex is most certainly overdone...