css - 带有 :target pseudo adding active style w/o Javascript 的标签

Question

我有简单的导航，它在哪里用 :target 伪。但是，对于当前选定的选项卡，我有一些样式，例如 .active。我也有 :target 的样式，大致相同。问题是主动选择的选项卡使用一些::before 伪来添加向下箭头。这是我无法与 :target 结合实现的。是否可以？ 我想在 :target 上有::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>

---

更新了基于评论的示例，如何使用 :target 伪类定位 2 个元素

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