選項卡：目標僞添加無效Javascript的活動樣式

Question

我有簡單的導航，它在哪裏與：目標僞。然而，對於當前選擇的選項卡，例如.active，我有一些風格。我也有樣式：大致相同的目標。問題是積極選擇的標籤使用some :: before僞添加向下箭頭。這是我無法與以下組合實現的目標：目標。可能嗎？ 我想有::內容之前：目標：

 <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>