html - 如何制作伪元素 :before stay active?

Question

我目前正在努力使我的伪元素 :before 在单击时保持事件状态。

我在这里做了一个小演示: https://jsfiddle.net/ud8p2nak/1/

我希望它在当前页面上保持事件状态，所以如果我在帐户页面上，我希望我的伪元素在帐户页面上保持事件状态。我试过 :active 但它并没有完全保持活跃。感谢您的帮助，谢谢。

<div class="side_col">

    <a href="#">
      <div class="side_link">Accounts
      </div>
    </a>
    <a href="#">
      <div class="side_link">Newsletter
      </div>
    </a>
    <a href="#">
      <div class="side_link">Operator
      </div>
    </a>
    <a href="#">
      <div class="side_link">Invoice
      </div>
    </a>

.side_col {
  float: left;
  width: 20%;
  height: 100%;
  background-color: #343A47;
}

.side_link:before {
  float: left;
  content: "";
  display: inline-block;
  height: 100%;
  width: 7px;
  background-color: #343A47;
}

.side_link:active::before {
  background-color: #24BDE9;
}

.side_link {
  text-align: left;
  line-height: 50px;
  width: 100%;
  height: 50px;
  background: #343A47;
  color: #fff;
  font-weight: 500;
}

.side_link:hover {
  background-color: #2b303b;
}

.side_link_active {
  background-color: #2b303b;
}

Answer 1

更新

OP 询问是否可以使用 :target加上额外的 <a>缠绕着它。是的，查看此测试并单击名为“发票”的最后一个链接。

FIDDLE

CSS 解决方案正在使用 :target 伪类。很简单:

1. 为您打算更改状态(开、关、事件、非事件等)的元素分配一个 ID，这将被称为目标。
2. 接下来，制作一个<a>锚定并分配它为 href目标 ID 的值，前面带有 #哈希标记(例如 <a href='#idOfTarget'>LINK</a> )。
3. 最后，使用目标和 :target 创建一个 CSS 规则集伪类(例如 #idOfTarget:target { color: red; } .

片段

.side_col {
  float: left;
  width: 20%;
  height: 100%;
  background-color: #343A47;
}
.side_link:before {
  float: left;
  content: "";
  display: inline-block;
  height: 100%;
  width: 7px;
  background-color: #343A47;
}
#sl1:target:before,
#sl2:target:before,
#sl3:target:before,
#sl4:target:before {
  background-color: #24BDE9;
}
.side_link {
  text-align: left;
  line-height: 50px;
  width: 100%;
  height: 50px;
  background: #343A47;
  color: #fff;
  font-weight: 500;
}
.side_link:hover {
  background-color: #2b303b;
}

<div class="side_col">

  <a href="#sl1">
    <div id="sl1" class="side_link">Accounts
    </div>
  </a>
  <a href="#sl2">
    <div id="sl2" class="side_link">Newsletter
    </div>
  </a>
  <a href="#sl3">
    <div id="sl3" class="side_link">Operator
    </div>
  </a>
  <a href="#sl4">
    <div id="sl4" class="side_link">Invoice
    </div>
  </a>

</div>