使用复选框激活 CSS 伪

Question

我不确定这是否可能。但基本上我正在使用伪元素来滑入额外的内容。这非常有效。但是，我还想做的是让它出现并在勾选复选框或单选按钮时保留。是否可以使用复选框欺骗 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%;
}

谢谢大家。

Answer 1

是的，但是您需要将元素与:after CSS直接放在复选框之后，并使用相邻的同级选择器+来定位它(就像我的答案一样(，或者您可以将其放在复选框之后的任何位置并使用常规同级选择器~来定位它。

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

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