Html 如何创建伪元素：在保持活动状态之前？

我目前正在努力使我的psuedo元素：在单击时保持活动状态之前

我在这里做了一个小演示：

当您在当前页面上时，我希望它保持活动状态，因此如果我在accounts页面上，我希望我的伪元素在accounts页面上保持活动状态。我尝试过：主动，但不能完全保持主动。谢谢你的帮助

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

---

：active

伪类是链接的状态。当按下鼠标按钮时应用该选项。您不能使用它来引用活动页面

为了解决您的问题，您应该编写一个小脚本，将唯一标识符（ID或类名）应用于链接。大概是这样的：

注意修改后的HTML和CSS！JS如下所示：

window.addEventListener（“DOMContentLoaded”，function（））
{
var activepage=location.pathname；
document.getElementById（activepage）.classList.add（“active”）；
});

它的工作原理

假设您的页面是

example.com

！单击导航栏中的第一个链接时，您将进入

example.com/accounts

加载页面时，将触发

DOMContentLoaded

事件，该事件调用事件侦听器中的函数。从URL（

location.pathname

）获取当前子页面，然后在DOM中查找与ID具有相同字符串的元素。如果找到该元素，则分配

.active

类，CSS将完成其余工作

---

请注意，JS代码在小提琴中不起作用，因为您实际上没有加载页面，但是如果您在源代码中使用JS代码就可以了。

您必须在

div

中添加一个额外的类，以使

：：before

处于活动状态。您不能像以前那样应用

：active

。我的意思是，您可以应用

：active

，但在您的情况下，它将不起作用，因为当您单击DOM中的另一个元素时，它将处于非活动状态

你必须这样做

.side\u col{
浮动：左；
宽度：20%；
身高：100%；
背景色：#343A47；
}
.side_链接{
位置：相对位置；
左侧填充：30px；
}
.侧链接：之前{
浮动：左；
内容：“；
显示：内联块；
身高：100%；
宽度：7px；
左：0px；
背景色：#333；
位置：绝对位置；
}
.side_link.active:：before{
背景色：#24BDE9；
}
.side_链接{
文本对齐：左对齐；
线高：50px；
宽度：100%；
高度：50px；
背景：343A47；
颜色：#fff；
字号：500；
}
.侧链接：悬停{
背景色：#2b303b；
}

更新 OP询问是否可以将

：target

与其他

CSS解决方案使用伪类。这很简单：

为要更改状态（打开、关闭、活动、非活动等）的元素指定id，该元素将被称为目标
接下来，制作一个
）
最后，使用target和
：target
伪类（例如
#idOfTarget:target{color:red；}
）创建一个CSS规则集
一小条

.side\u col{
浮动：左；
宽度：20%；
身高：100%；
背景色：#343A47；
}
.侧链接：之前{
浮动：左；
内容：“；
显示：内联块；
身高：100%；
宽度：7px；
背景色：#343A47；
}
#sl1：目标：之前，
#sl2：目标：之前，
#sl3：目标：之前，
#sl4：目标：之前{
背景色：#24BDE9；
}
.side_链接{
文本对齐：左对齐；
线高：50px；
宽度：100%；
高度：50px；
背景：343A47；
颜色：#fff；
字号：500；
}
.侧链接：悬停{
背景色：#2b303b；
}

a:target可能会帮助您感谢@IlyaNovojilov，这种方法似乎很有效！这是一种很好的方法，但是我可以在href中添加一个url，并且仍然保留id链接吗？或者我必须用另一个href链接包装href链接吗？我明白了，您希望侧导航在用户浏览网站时成为一个标记。我不明白为什么这样做行不通k、 这似乎是合理的…我会很快测试你的理论，待命。非常感谢！这是一个完美的答案，我感谢你花时间帮我解决这个问题。效果很好！@zer00neGlad很有帮助！编码快乐！
.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;
}