Вкладки с: цель псевдо добавления активного стиля без Javascript

Question

У меня простая навигация, где она была с: target pseudo. Однако у меня есть некоторый стиль для текущей вкладки, такой как .active. У меня также есть стили для: цель, которая примерно такая же. Проблема в том, что вкладка Actively selected использует некоторые :: before pseudo для добавления стрелки вниз. Этого я не могу достичь в сочетании с: target. Является ли это возможным? Я хочу иметь :: до того контента: цели:

 <nav> 
      <div class="nav nav-wrapper"> 
       <ul role="navigation"> 
        <li><a href="#top" class="active">Top 50</a></li> 
        <li><a href="#mid">Mid</a></li> 
        <li><a href="#bottom">Bottom</a></li> 
        <li><a href="#about">About</a></li> 
       </ul> 
      </div> 
     </nav> 

и имеют

.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

Конечно, это работает делает .active::before, и вы можете сделать :target::before, показано в образце ниже

.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><a href="#top" class="active">Top 50</a> 
 
     </li> 
 
     <li><a href="#mid">Mid</a> 
 
     </li> 
 
     <li><a href="#bottom" id="bottom">Bottom - click me to show :target::before</a> 
 
     </li> 
 
     <li><a href="#about">About</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</nav>

---

Обновлено с образцом на основе комментариев, как целевые 2 пунктов с использованием :target псевдо класс

.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><a href="#top" class="active">Top 50</a> 
 
     </li> 
 
     <li><a href="#mid">Mid</a> 
 
     </li> 
 
     <li><a href="#bottom" id="bottom1">Bottom - click me to show :target::before</a> 
 
     </li> 
 
     <li><a href="#about">About</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</nav> 
 

 
<section id="bottom2"></section>