Tabs with :target pseudo adding active style w/o Javascript - css

Question

I have simple navigation, where did it with :target pseudo. I have however some style for currently selected tab like .active. I also have styles for :target which about the same. The problem is that Actively selected tab uses some ::before pseudo to add down arrow. This is something I can't achieve in combination with :target. Is it possible?
I want to have ::before content on :target:
<nav>
<div class="nav nav-wrapper">
<ul role="navigation">
<li>Top 50</li>
<li>Mid</li>
<li>Bottom</li>
<li>About</li>
</ul>
</div>
</nav>
and have
.nav ul li a:hover,
.nav ul li a.active,
.nav ul li a:target {
background-color: white;
color: #585858;
position: relative;
}
.nav ul li a::before {
content: " ";
position: absolute;
top: 0;
left: 50%;
...
}
.nav ul li a.active::before {// will obviously not work, but it is something I can achieve}

Answer 1

Of course it works doing .active::before, and you can do :target::before, showed in below sample
.nav ul li a:hover,
.nav ul li a.active,
.nav ul li a:target {
background-color: white;
color: #585858;
position: relative;
}
.nav ul li a::before {
content: " ";
position: absolute;
top: 0;
left: 100%;
}
.nav ul li a:target::after {
content: " ...Hey there, 123";
white-space: nowrap;
}
<nav>
<div class="nav nav-wrapper">
<ul role="navigation">
<li>Top 50
</li>
<li>Mid
</li>
<li>Bottom - click me to show :target::before
</li>
<li>About
</li>
</ul>
</div>
</nav>
Updated with a sample based on a comment, how target 2 items using :target pseudo class
.nav ul li a:hover,
.nav ul li a.active,
.nav ul li a:target {
background-color: white;
color: #585858;
position: relative;
}
.nav ul li a::before {
content: " ";
position: absolute;
top: 0;
left: 100%;
}
div:target ~ nav #bottom1::after,
div:target ~ #bottom2::after {
content: " ...Hey there, 123";
white-space: nowrap;
}
<div id="bottom"></div>
<nav>
<div class="nav nav-wrapper">
<ul role="navigation">
<li>Top 50
</li>
<li>Mid
</li>
<li>Bottom - click me to show :target::before
</li>
<li>About
</li>
</ul>
</div>
</nav>
<section id="bottom2"></section>