使用复选框激活 CSS 伪答案

【问题标题】：Activate CSS Pseudo using Checkbox使用复选框激活 CSS 伪
【发布时间】：2017-05-14 23:57:28
【问题描述】：

我不确定这是否可能。但基本上我使用伪元素来滑入额外的内容。这完美地工作。但是，如果勾选了复选框或单选按钮，我还想做的是让它出现并保持不变。是否可以使用复选框来欺骗 Pseduo 状态。

基本上我想要一个复选框来触发一个活跃的 Pseduo 状态。

任何人都可以建议在不过多更改当前设置的情况下执行此操作的最佳方法

.client-link.has-content:target .client:after,
.client-link.has-content:active .client:after,
.client-link.has-content:focus .client:after {
left:50%;
}

谢谢大家。

【问题讨论】：

标签： jquery css pseudo-class

【解决方案1】：

是的，但是您需要将带有 :after CSS 的元素直接放在复选框之后，并使用相邻的兄弟选择器 + 来定位它（就像我的回答一样），或者您可以将它放在后面的任何位置复选框并使用通用兄弟选择器~ 来定位它。

input[type="checkbox"]:checked + .foo:after {
  content: 'foo';
}

<input type="checkbox">
<div class='foo'></div>

【讨论】：