CSS伪元素选择器与checked属性结合使用实践

CSS 中的伪元素允许开发者向选定元素的内容前后添加装饰性内容，而无需修改HTML结构。历史上，伪类和伪元素都采用单个冒号前缀，但根据最新的W3C标准，伪元素应使用双冒号前缀（如 ::before 和 ::after），以区分于伪类。然而，为了保持向后兼容性，浏览器仍然支持单冒号形式。

伪类用于描述元素的特定状态或属性，例如:hover、:active等，而伪元素则用于创建不在DOM中的虚拟元素，以实现特定的样式效果。常见的伪元素有:

• E::before - 在元素内容前插入内容


• E::after - 在元素内容后插入内容

例如，使用::before和::after伪元素可以在列表项前后添加文本或图标，代码如下：

  
刘亦菲

  
范冰冰

  
杨幂

  
袁姗姗

上述代码会在无序列表的开始和结束处分别显示一段文本。

此外，结合 input 元素的 :checked 伪类与 ::after 伪元素，可以实现当复选框或单选按钮被选中时动态更改样式的效果。示例如下：

  

    
点击你喜欢的明星

    

      
范冰冰

      
李冰冰

      
杨幂

    

  

  

    
以下是多选

    

      
惊天魔盗团

      
魔兽

      
北京遇上西雅图

    

  

在这个例子中，当选中某个单选按钮或复选框时，关联的标签背景色变为红色，并在文字后追加“我被选中了”。这利用了相邻选择符（E + F），即选择紧跟在E元素后的第一个F元素。