伪类（:hover）与伪元素（::before）的巧妙用法

函数与作用域

在CSS中，伪类（Pseudo-classes）和伪元素（Pseudo-elements）是两种强大的选择器，它们虽然不属于传统编程中的"函数"概念，但在CSS的作用域中扮演着类似的角色，能够扩展元素的选择和行为方式。

伪类（:hover）的作用域与行为

伪类:hover是最常用的交互状态选择器之一，它定义当用户鼠标悬停在元素上时的样式变化。从作用域角度来看：

作用目标：:hover作用于已存在的DOM元素
作用时机：仅在用户交互时触发
作用范围：只影响被悬停的元素本身（除非配合其他选择器）

css 复制代码

.button {
  background-color: blue;
  transition: background-color 0.3s;
}

.button:hover {
  background-color: darkblue;
  transform: scale(1.05);
}

伪元素（::before）的作用域与行为

伪元素::before则允许开发者在元素内容前插入虚拟内容，它的作用域特性包括：

作用目标：为选中的元素创建虚拟子元素
作用时机：在页面渲染时自动生成
作用范围：存在于目标元素的内容前，形成新的渲染层

css 复制代码

.tooltip::before {
  content: "提示信息";
  position: absolute;
  bottom: 100%;
  background: black;
  color: white;
  padding: 5px;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover::before {
  opacity: 1;
}

巧妙结合应用

将伪类和伪元素结合使用可以创造出丰富的交互效果：

1. 动态提示框

css 复制代码

.info-icon {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ccc;
  text-align: center;
  line-height: 20px;
}

.info-icon::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 150%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s;
}

.info-icon:hover::before {
  opacity: 1;
}

2. 自定义复选框

css 复制代码

.checkbox-container input {
  display: none;
}

.checkbox-container label::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #ccc;
  margin-right: 8px;
  vertical-align: middle;
  transition: all 0.3s;
}

.checkbox-container input:checked + label::before {
  background: #4CAF50;
  border-color: #4CAF50;
  content: "✓";
  color: white;
  text-align: center;
  line-height: 16px;
  font-size: 12px;
}

3. 按钮悬停效果增强

css 复制代码

.fancy-button {
  position: relative;
  padding: 10px 20px;
  background: linear-gradient(to right, #ff8a00, #da1b60);
  color: white;
  border: none;
  overflow: hidden;
}

.fancy-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.3), rgba(255,255,255,0));
  transition: all 0.5s;
}

.fancy-button:hover::before {
  left: 100%;
}

作用域注意事项

伪类链式调用：可以组合多个伪类（如:hover:active），但要注意顺序
伪元素限制：每个选择器只能使用一个伪元素，且必须出现在基础选择器之后
内容属性：::before和::after必须设置content属性，即使是空值（content: ""）
可继承性：伪元素会继承来自父元素的某些样式属性

通过深入理解伪类和伪元素在CSS作用域中的行为，开发者可以创造出既美观又高效的界面效果，而无需增加额外的HTML标记或JavaScript代码。